0

just a newbie using local storage. Can anyone help me with this problem?

My goal is when I click the Done button the input I've made is appending on the .sNote class however it's not appending the way I want to be. However, when I check my local storage the data I've input is there but not really append in my .sNote.

Can anyone help me? I'm really having a hard time using local storage cause my just new using this.

Please see this code and also you can see my actual code here https://codepen.io/rico-p-buenviaje/pen/yLXqQEB

$(document).ready(function() {
  $(".aNote").on("click", function() {
    var hrd = $(".iNote-items").val();
    var para = $(".iNote-items-2").val();

    console.log(hrd);
    console.log(para);

    if (hrd && para) {
      localStorage.setItem(hrd, para);
    }
  });

  for (var i = 0; i < localStorage.length; i++) {
    localStorage.keys(hrd, para)[i]

    $(".sNote").append(
      '<div class="hrd">' + hrd[(localStorage.keys(hrd)[i])] +
      '</div><div class="para">' + para[(localStorage.keys(para)[i])] + '</div>'
    );
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="iNote-inputs">
  <textarea class="iNote-items" rows="3">aaaa</textarea>
  <textarea class="iNote-items-2" rows="3"></textarea>
  <div class="aNote">Done</div>
</div>

<div class="spl-hrd-iNote">
  <div class="sNote"></div>
</div>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
CoreTM
  • 195
  • 7
  • Can anyone help me with this? Also when I check my local storage the first data I've input is converted to key and value If I'm not mistaken it should be both save a value. Thanks and looking forward to you guys – CoreTM Sep 23 '21 at 05:31
  • You appear to be manipulating Strings yet it is not clear what you are trying to accomplish. Since you already have `hrd` and `para`, why do you need get them again from LocalStorage. – Twisty Sep 23 '21 at 05:35
  • Hi, @Twisty thanks for replying. I just want to save it on my Local Storage so that it will not disappearing when refreshing. Also at the same time appending the input value I've typed on the textarea on the .sNote Class so that when I refresh my page the value still there. – CoreTM Sep 23 '21 at 05:42
  • 2
    [jsfiddle version](https://jsfiddle.net/8awz314t/) because codepen is rubbish (imo) and stack snippet doesn't allow localstorage. **edit** jsfiddle uses the code **provided here** - which gives the obvious errors indicated above. The codepen linked uses **different code** (from the answer below possibly) – freedomn-m Sep 23 '21 at 08:36

1 Answers1

0
for (var i = 0; i < localStorage.length; i++) {
          localStorage.key(i)
       //  localStorage.keys(hrd, para)[i]
          
          $(".sNote").append(
              '<div class="hrd">' +localStorage.key(i) +
              '</div><div class="para">' + localStorage.getItem(localStorage.key(i)) +'</div>'
          );
      }

Try this. You haven't defined hrd anf para variables before the following line.

 localStorage.keys(hrd, para)[i]

So that cause an error. and also that is not the proper way to read the localstorage. If you use localstorage for savin other data as well the best thing to use a separate localstorage item which contains an array of your storing items. That way you don't get unnecessary items in this iteration check Looping through localStorage in HTML5 and JavaScript for details

If you want to append this when click on 'done' button also better to move appending part to a function as below and call it in both cases.

function apendItem (key, value) {
   $(".sNote").append(
      '<div class="hrd">' + key+
      '</div><div class="para">' + value + '</div>'
    );
    }

call above functions from click button as below

        $(".aNote").on("click", function(){
      var hrd = $(".iNote-items").val();
      var para =$(".iNote-items-2").val();
      
      
      if(hrd && para) {
        localStorage.setItem(hrd, para);
        apendItem (hrd, para);
      }
    });

call it onload as below

for (var i = 0; i < localStorage.length; i++) {
         apendItem (localStorage.key(i), localStorage.getItem(localStorage.key(i)));
}
userDuR
  • 378
  • 4
  • 14
  • hi I've tried it but still same result please see it here https://codepen.io/rico-p-buenviaje/pen/yLXqQEB – CoreTM Sep 23 '21 at 07:09
  • @CoreTM what do you mean by same result? I get the previously saved key,value pairs in the html when refresh now. ```
    aaaa
    ssss
    ``` this was in the codepen when i opened your code. Isn't that you wanted?     – userDuR Sep 23 '21 at 07:57
  • hi thanks for this idea. I've seen it and it's already appending. However, it starts appending once you've refreshed the I didn't try that that why I thought it's not working however it's working but you need to refresh it first to see the data that append. Do you also getting that when you try typing on the textarea? – CoreTM Sep 23 '21 at 08:35
  • @CoreTM I have edited the answer for that. please check – userDuR Sep 23 '21 at 09:04
  • thanks for this answer looking into it now – CoreTM Sep 23 '21 at 10:33
  • @CoreTM ok. let me know the result. – userDuR Sep 23 '21 at 11:34
  • hi it's working now however the other data store in local storage also showing on my sNote class? How can I remove it can you help me I need only the data I've typed on my input fields – CoreTM Sep 24 '21 at 01:42
  • "If you use localstorage for saving other data as well the best thing to use a separate localstorage item which contains an array of your storing items. That way you don't get unnecessary items in this iteration" Did you read that part in my answer? You just put every thing in sNote to one array and store that as one item. when loading the app get that one item only from localstorage , parse json and iterate the list https://stackoverflow.com/questions/3357553/how-do-i-store-an-array-in-localstorage this link will help you – userDuR Sep 24 '21 at 03:54
  • Thanks userDuR looking into it now really appreciate your help. – CoreTM Sep 24 '21 at 05:01