Question 10921 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

problem with local storage getItem and setItem – Jquery

is there a way to use localstorage on the code below? just to make sure that the text you typed remains on the box you sent it to even after refreshing.

jquery:

$(document).ready(function() {
   var $input1 = $('.textField');
   
   $(".sendTo").on("click", function() {
      var box = $(this).data("sendto");
      $(`[data-box='${box}']`).append($input1.val());
      $input1.val("");
   });
});

html:

<input class="textField" type="text">
  <div class="sendTo" data-sendto='box1'>send to box 1</div>   
  <div class="sendTo" data-sendto='box2'>send to box 2</div> 
  <div data-box="box1">box 1</div>
  <div data-box="box2">box 2</div>

im having trouble where to place the localStorage.setItem andlocalStorage.getItem

Tags:

2

Answers


  1. 0

    You can achieve it like this (see comments for more explanation):

      $(document).ready(function () {

        var $input1 = $('.textField'); 

        // when page is loaded then get possible value from storage
        var val = localStorage.getItem('savedtext');

        // if there is something stored, write it into the inputfield
        if (val != undefined && val != '') {
            $input1.val(val);
        }

        $(".sendTo").on("click", function () {

            // on click save the value of the inputfield to localStorage
            localStorage.setItem('savedtext', $input1.val());

            var box = $(this).data("sendto");
            $(`[data-box='${box}']`).append($input1.val());
            $input1.val("");
        });
    });

    You can also save the data on every keypress if you add this event registration on the input-field:

    $input1.on("keyup", function () {

    // if you want to save it not only on click
    // but all the time
    localStorage.setItem('savedtext', $(this).val());
});
    Login or Signup to reply.
  2. 0

    To use this code with localstorage.setItem / getItem you just need to know the key to read. That’s already passed in the box variable:

    var box = $(this).data("sendto");

    so you can use it as:

    localStorage.setItem(box, output.text())

    To retrieve with getItem you can loop each output that has attribute [data-box], get the .data("box") and use that as the key:

       $("[data-box]").each(function() { 
      var box = $(this).data("box");
      var val = localStorage.getItem(box);
      $(this).text(val);
   });

    Updated code:

    $(document).ready(function() {
   var $input1 = $('.textField');
   
   $("[data-box]").each(function() { 
      var box = $(this).data("box");
      var val = localStorage.getItem(box);
      $(this).text(val);
   });
   
   $(".sendTo").on("click", function() {
      var box = $(this).data("sendto");
      var output = $(`[data-box='${box}']`);
      output.append($input1.val());
      $input1.val("");
      localStorage.setItem(box, output.text());
   });
});

    Note: stackoverflow snippets don’t allow localstorage, so you can use this fiddle to see it in action: https://jsfiddle.net/35ugqf6j/

    Note: this clears the default "box 1" text in the outputs – you can check for null if you don’t want that on the first run.

    Note: you’ll need a method to clear the output/localstorage otherwise it just gets bigger and bigger.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search