Save To Localstorage With Html Jquery

October 07, 2024 Post a Comment

Hello I have a big problem that I have tried to solve, but it just does not work. When you click on a card (.card-1), I want the card to fadeOut and that it would be saved in loca

Solution 1:

Update

Demo 1

"My main goal is that the card is gonna be fadeOut even after you refresh the page. It's seems to be impossible for me to get this to work."

That wasn't apparent in the question, but now that is cleared up, first I should inform you about localStorage as it pertains to your situation:

localStorage stores data as Strings indefinitely (until a user uses clear() to completely clean it out, or removeItem() method, or by overwriting an existing key by using setItem() and a new value, or the 2 to 10MB limit was exceeded).
localStorage storage limit is per domain. For example, site-x.com has 2MB of data with 8MB remaining and site-z.net has 4MB of stored data and 6MB left. Moreover, what is stored for one domain is not shared with any other domain.
As a beneficial "side effect", data in localStorage is shared between all pages of a domain.

BTW there are 2 things that need to be pointed out concerning the OP (Original Post):

var storage = $(".card-1").val;

Syntactically, it is wrong, it should be the following (assuming .card-1 was a form control like an <input> or <textarea>):

var storage = $(".card-1").val()

Secondly, <section> is a block element not a form control so val() method and .value property will never work. The easiest way to know if an element is a form control is that it can have a value attribute.

This demo cannot run on this site because localStorage is blocked. See this PLUNKER 1 and PLUNKER 2

Demo 1

<!DOCTYPE html><html><head><style>body {
      font: 40016px/1.5 Verdana;
    }
    
    [type=checkbox] {
      display: none;
    }
    
    #chx0:checked~.card-0 {
      display: none;
    }
    
    #chx1:checked~.card-1 {
      display: none;
    }
    
    #chx2:checked~.card-2 {
      display: none;
    }
    
    label,
    input {
      font-family: Consolas;
      font-variant: small-caps;
      font-size: 20px;
      display: block;
      cursor: pointer;
    }
    
    label {
      min-height: 30px;
      background: rgba(0, 200, 0, 0.4);
      text-align: center;
      padding-top: 8px;
    }
    
    code {
      font-family: Courier New;
      background: rgba(121, 45, 121, 0.2);
    }
    
    kbd {
      border: 2px outset grey;
      border-radius: 8px;
      padding: 2px4px;
      font-family: Verdana;
    }
    
    footer {
      height: 90px;
    }
    
    summaryh3 {
      display: inline-block;
      cursor: pointer;
      margin: 10px auto;
    }
  </style></head><body><details><summary><h3>CSS</h3></summary><ul><li>Click one of the <code>&lt;fieldset&gt;s</code> and it disappears because...
        <ul><li>
            there's a nested <code>&lt;label&gt; [for="ID-of-Input"]</code> linked to an...
          </li><li>
            invisible <code>&lt;input id="ID-of-Input"&gt; [type=checkbox]</code></li></ul></li><li>
        A click on a <code>&lt;label&gt;</code> will be a click on its linked input
      </li><li>
        By using the pseudo-class selector <code>:checked</code> and the general sibling combinator <code>~</code> the "younger" siblings are now subject to a switch that can manipulate CSS dramatically around them and on them. In the demo, each invisible
        checkbox will hide a specific <code>.card</code>.
      </li></ul></details><details><summary><h3>jQuery</h3></summary><ul><li>
        Basically CSS is used to remove the targets and jQuery is used tp keep the current state of certain elements persistant.
      </li><li>
        In the demo an <code>each()</code> will loop through the checkbox <code>#id</code>s and pass them through <code>getData()</code> function as keys. If any values of '1' are found, the checkbox <code>#id</code> that corresponds with the key gets
        checked.
      </li></ul></details><h3>Instructions</h3><p><kbd>Reload</kbd> this page and the cards that are gone continue to be so. In order to remove the data from <code>localStorage</code>, click the <kbd>Clear</kbd> button.</p><hr><inputid='chx0'class='chx'type='checkbox'><inputid='chx1'class='chx'type='checkbox'><inputid='chx2'class='chx'type='checkbox'><fieldsetclass='card-0 card'data-id='chx0'><labelfor='chx0'>Card 0</label></fieldset><hr><fieldsetclass='card-1 card'data-id='chx1'><labelfor='chx1'>Card 1</label></fieldset><hr><fieldsetclass='card-2 card'data-id='chx2'><labelfor='chx2'>Card 2</label></fieldset><inputclass='reload'type='button'value='Reload'style='float:left; margin:5px 10px 20px 0; width:20ch;background:cyan;color:#000'><inputclass='clear'type='button'value='Clear'style='float:right; margin:5px 10px 20px 0; width:20ch;background:tomato;color:#fff'><footer>&nbsp;</footer><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>var data;

    $('.chx').each(function(i, c) {
      var key = this.id;
      data = getData(key);
      console.log(data);
      if (data === '1') {
        this.checked = true;
      }
    });

    $(".chx").on('click', function() {
      var key = this.id;
      var val = this.checked ? '1' : '0';
      setData(key, val);
    });

    functiongetData(key) {
      data = localStorage.getItem(key);
      if (data === null) {
        returnfalse;
      } else {
        return data;
      }
    }

    functionsetData(key, value) {

      if (key === undefined || value === undefined) {
        returnfalse;
      } else {
        localStorage.setItem(key, value);
        returntrue;
      }
    }

    $('.reload').on('click', function() {
      location.reload(true);
    });

    $('.clear').on('click', function() {
      localStorage.clear();
    });
  </script></body></html>

Demo 2

You have a syntax error $(".card-1").val; should be $(".card-1").val(). Besides that, I haven't bothered to debug the rest. Don't use the click event on what I can only assume to be an <input> (it would be inconvenient to test a button's value), use either the change or input event (I recommend change if dealing with localStorage). The following demo features a simple use of localStorage.

This demo cannot run on this site because localStorage is blocked. See this PLUNKER 1 and PLUNKER 2

Demo 2

var data = getData('card-1');

console.log(data);

if (data) {
  $('.card-1').val(data);
}

$(".card-1").on('change', function() {
  var storage = $(this).val();
  setData.call(this, 'card-1', storage);
  $(this).fadeOut();
});

functiongetData(key) {
  var data = localStorage.getItem(key);
  if (data === null) {
    returnfalse;
  } else {
    return data;
  }
}

functionsetData(key, value) {
  if (key === undefined || value === undefined) {
    returnfalse;
  } else {
    localStorage.setItem(key, value);
    returntrue;
  }
}

$('.view').val('card-1: ' + data);
$('.clear').on('click', function() {
  localStorage.clear();
})

<!DOCTYPE html><html><head></head><body><ol><li>Enter text then click the <kbd>BLR</kbd> button to unfocus from the input thereby triggering the change event.</li><li>Next, refresh this page and the text entered should be in the input again.</li><li>In order to remove the text from localStorage, click the <kbd>CLR</kbd> button.</li></ol><inputclass='card-1'value=''><inputclass='blur'type='button'value='BLR'><inputclass='clear'type='button'value='CLR'><outputclass='view'></output><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></body></html>

Solution 2:

First of all, you just want to fade out the card (each represented by a section HTML tag) on click, so

$("section").click(function() {
  var card = $(this);  //get the card that is clickedvar storage = card.attr("class");  //get the class name of this card
  card.fadeOut();  //hide itlocalStorage.setItem("local", storage);  //save the value
});

Next you would want the page to check whether there is any stored value so that you can hide the card.

$(function() {  //short hand for $(document).ready()var value = localStorage.getItem("local");  //get the value from local storage with the same key, which is "local"if (value) {  //if there is a value stored previously
    $("section." + value).fadeOut();  //get back the same card and hide it
  }
});

Html5 Guide

Save To Localstorage With Html Jquery

Solution 1:

Update

Demo 1

Demo 1

Demo 2

Demo 2

Solution 2:

Post a Comment for "Save To Localstorage With Html Jquery"