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＆amp; amp; 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来做笔记通过这种方式，您可以将用户注释存储更长时间

有关cookie的更多信息，请访问：

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

HTML5本地存储以保存笔记

2 个答案: