How to auto save a variable in localStorage

Question

I want to automatically save the value of var memo in localStorage so after restarting the browser the value of the input #memo doesn't change. Can anyone show me how to do it?

 <script>

      $(document).ready(function () {

            var memo = document.getElementById('memo');
            memo.val = memo.value;

            if (typeof(Storage) !== "undefined") {
                window.localStorage.setItem('memo', memo.value);
                window.localStorage.getItem('memo');
            } else{
                console.log('Web Storage is not supported');
            }
            

            
         var ajax_call = function () {
             $.ajax({
                 type: "GET",
                 url: "test.php",
                 dataType: "html",
                 success: function (response) {
                     color = response;
                     console.log(color);
                     if (color == white) {
                         memo.val++;
                         memo.value = memo.val;
                     } else {
                         console.log("Color is not white");
                     }
                 }
            });
         }

         var interval = 30000;
         setInterval(ajax_call, interval);
     });

 </script>

       <input type="text" id="memo">

The value of the memo is set through the ajax_call function every time if (color == white) is true. — CoderJay, Nov 24 '20 at 05:13
better to not poll the server and simply add a change event to the input, when it changes update localstorage — Lawrence Cherone, Nov 24 '20 at 05:14
This isn't even using [`localStorage.setItem()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) anywhere, so how would you expect it to "automatically save the value of var memo in localStorage" if you aren't even calling `localStorage.setItem()`? Also you would need `localStore.getItem()` to retrieve it. — Samathingamajig, Nov 24 '20 at 05:16
@Samathingamajig Can you please show me what code I have to use inside the parentheses in setItem() and getItem() ? — CoderJay, Nov 24 '20 at 05:22
@CoderJay https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — kmoser, Nov 24 '20 at 05:28

CoderJay · Answer 1 · 2020-12-05T06:22:18.480

This is the answer to the question:

  <script>
       $(document).ready(function () {
             var memo = document.getElementById('memo');
             memo.val = memo.value;

             if (typeof(Storage) !== "undefined") {
                 // Value of the variable memo is saved in local storage
                 localStorage.setItem("memo", memo.value);
             } else{
                 console.log('Web Storage is not supported');
             }
  
          var ajax_call = function () {
              $.ajax({
                  type: "GET",
                  url: "test.php",
                  dataType: "html",
                  success: function (response) {
                      color = response;
                      console.log(color);
                      if (color == white) {
                          memo.val++;
                          memo.value = memo.val;
                      } else {
                          console.log("Color is not white");
                      }
                  }
             });
          }

         var interval = 30000;
         setInterval(ajax_call, interval);
         document.getElementById("memo").value = localStorage.getItem("memo");
      });
  </script>

        <input type="text" id="memo">

How to auto save a variable in localStorage

1 Answers1