HTML5本地存储以保存笔记

Question

I created this note web app that allows the user to create several notes and navigate between them by using the various tabs on the left.

Now I want these notes to save in the local storage so I added the following code:

$(document).ready(function() {
    $(window).unload(saveSettings);
        loadSettings();
    });

    function saveSettings() {
        localStorage.notes = $('#notes').html();
    }

    function loadSettings() {
        $('#notes').html(localStorage.notes);
    }
}

It works in a certain degree. Meaning the whole div is saved in the cache but for some reason when I reload the page I can see the different tabs but not the text that I wrote. Obviously the whole point is to save the notes so it's a problem if I can't see the text that I wrote.

I am unfortunately not so knowledgeable on javascript & jquery, so I have no idea what to do.

I believe it would be smarter to save each tabs and textarea individually in the cache instead of the whole Div but I also don't know how to do that.

If anyone can help me or at least guide me, it would be very appreciated.

Answer 1

The "value" of a <textarea> field apparently does not become part of the innerHTML of that element, it's accessible instead via the .val() jQuery method or the .value DOM property.

It would be better to abstract the content of the tabs into eg an array, and recreate the DOM elements around those when you load the page.

This would ensure that if you redesign your content that old notes don't appear with the wrong rendering.

For example (untested):

function saveSettings() {
    var notes = $('#notes textarea').map(function(ix, el) {
        return el.value;
    });
    localStorage.notes = JSON.stringify(notes);
}

function loadSettings() {
    var notes = JSON.parse(localStorage.notes);

    // rebuilding divs left as exercise
    ...
}

Answer 2

I suggest you that you can use cookies to make notes In this is way you can store users notes for longer time

for more information about cookies you can check here :

http://www.ms2fun.com/2015/01/javascript-cookies-getcookie-setcookie.html