如何让 localStorage 在 todolist-app 上工作答案

【问题标题】：How to get localStorage to work on a todolist-app如何让 localStorage 在 todolist-app 上工作
【发布时间】：2014-12-04 16:27:52
【问题描述】：

我不知道 localStorage 是如何工作的，我的项目需要它。我正在做一个 todolist-app 并且我需要保存项目以便用户可以关闭该应用程序并且当他们再次打开该应用程序时该列表仍然存在。我该怎么做？

<!DOCTYPE html>
<html manifest = offline.appcache>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">  
<link rel="shortcut icon" href="favicon.ico">
<link href="main.css" type="text/css" rel="stylesheet">


<title>Inköpslista</title>

</head>

<body>
<div id="kol1" class="kol">

    <h1>Inköp</h1>
    <input type="image" src="img/button.png" alt="Submit" id="storknapp"     onclick="klickaKnapp('skriva')"/>
        <div id="form">
        <input type"text" id="skriva" placeholder="Skriv din vara här!"/>
        <input type="image" id="knapp" src="img/pluss.png" alt="Submit"/>
        </div>   


</div>

<div id="kol2">
<ul id="listaavvara"></ul>
</div>



</body>
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
</html>

【问题讨论】：

你搜索了吗？这是谷歌上的第一个结果diveintohtml5.info/storage.html
@adrianogalessoalves 是的，我明白但不明白。
你知道 JavaScript 吗？
@adrianogalessoalves 有点，这是我在 12 月结束的第一门课程
我试图回答，但你需要在那里测试

标签： javascript html json local-storage

【解决方案1】：

Cookie 会降低您的 Web 应用程序的速度，因此如果您将数据存储到客户端浏览器中，您可能需要使用 localStorage 或 sessionStorage。所以如果你愿意：

大量存储空间
在客户端
页面刷新后仍然存在
并且不会传输到服务器

创造价值：

localStorage.setItem("bar", foo);

获取值：

var foo = localStorage["bar"];

删除值：

localStorage.clear();

如果您想创建一个列表，例如，您可以将 JSON 值存储到 localStorage 中，例如：

localStorage.setItem("list", "[{"name":"Adriano"},{"name":"Vic"},{"name":"Test"}]");

然后你检索它并用 JS 组装到你的页面中。

这个链接是完美的：http://diveintohtml5.info/storage.html

顺便说一句：它没有像 cookie 那样的过期日期 =)

【讨论】：

但是我们需要为输入字段中的所有内容提供唯一 ID，您对此有答案吗？
然后我如何将我的唯一 ID 放入此代码:)