HTML5本地存储来保存笔记

Question

我创建了这个note web app，允许用户创建几个笔记，并通过使用左侧的各种选项卡在它们之间导航。

现在我想这些笔记在本地存储保存，所以我说下面的代码：

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

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

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

它可以在一定程度上。意思是整个div保存在缓存中，但由于某种原因，当我重新加载页面时，我可以看到不同的标签，但不是我写的文本。 很明显，整个问题的关键在于保存笔记，所以如果我看不到我写的文本，这是一个问题。

我很遗憾不是很了解javascript jquery，所以我不知道该怎么做。

我相信将每个标签和textarea单独保存在缓存中而不是整个Div会更聪明，但我也不知道该怎么做。

如果任何人都可以帮助我或至少引导我，它将非常感激。

Answer 1

的一个<textarea>场的“价值”显然不会成为该元素的innerHTML的一部分，它是通过访问而不是.val() jQuery的方法或.value DOM属性。

将标签的内容抽象成例如一个数组，并在加载页面时重新创建DOM元素。

这将确保如果您重新设计您的内容，旧笔记不会出现错误的呈现。

例如（未经测试）：

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

我建议你，你可以用饼干做笔记 在这您可以存储用户的笔记较长时间

有关cookie的详细信息的方式您可以点击这里：

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