如何让localStorage在todolist应用程序上工作

How to get localStorage to work on a todolist-app

本文关键字：应用 应用程序 程序上 工作 todolist localStorage      更新时间：2023-09-26

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

<!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>

Cookies会降低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那样有有效期=）

相关文章：