web storage的用法

Web Storage分为两种:

  •  sessionStorage
  •  localStorage

从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;

这样做的好处是缓存数据和减少内存的占用;

不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

如上,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。

这样做的好处有:

1. 缓存数据

2. 减少对内存的占用.

 

对于localStorage的操作

1.将对象存入到localStorage

1 <script type="text/javascript">
2     var obj = { name:'Jim' };
3     var str = JSON.stringify(obj);
4     //存入
5     localStorage.obj = str;
6 </script>

2.从localStorage读取数据

复制代码
 1 <script type="text/javascript">
 2     var obj = { name:'Jim' };
 3     var str = JSON.stringify(obj);
 4     //存入
 5     localStorage.obj = str;
 6     //读取
 7     str = localStorage.obj;
 8     document.write(str);
 9     //重新转换为对象
10     obj = JSON.parse(str);
11 </script>
复制代码

3.例子

复制代码
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>Example</title>
 5     <style>
 6         body > * {
 7             float: left;
 8         }
 9 
10         table {
11             border-collapse: collapse;
12             margin-left: 50px;
13         }
14 
15         th, td {
16             padding: 4px;
17         }
18 
19         th {
20             text-align: right;
21         }
22 
23         input {
24             border: thin solid black;
25             padding: 2px;
26         }
27 
28         label {
29             min-width: 50px;
30             display: inline-block;
31             text-align: right;
32         }
33 
34         #countmsg, #buttons {
35             margin-left: 50px;
36             margin-top: 5px;
37             margin-bottom: 5px;
38         }
39     </style>
40 </head>
41 <body>
42     <div>
43         <div>
44             <label>Key:</label><input id="key" placeholder="Enter Key" />
45         </div>
46         <div>
47             <label>Value:</label><input id="value" placeholder="Enter Value" />
48         </div>
49         <div id="buttons">
50             <button id="add">Add</button>
51             <button id="clear">Clear</button>
52         </div>
53         <p id="countmsg">There are <span id="count"></span>items</p>
54     </div>
55     <table id="data" border="1">
56         <tr>
57             <th>Item Count:</th>
58             <td id="count">-</td>
59         </tr>
60     </table>
61     <script>
62         displayData();
63         var buttons = document.getElementsByTagName("button");
64         for (var i = 0; i < buttons.length; i++) {
65             buttons[i].onclick = handleButtonPress;
66         }
67         function handleButtonPress(e) {
68             switch (e.target.id) {
69                 case 'add':
70                     var key = document.getElementById("key").value;
71                     var value = document.getElementById("value").value;
72                     sessionStorage.setItem(key, value);
73                     break;
74                 case 'clear':
75                     sessionStorage.clear();
76                     break;
77             }
78             displayData();
79         }
80         function displayData() {
81             var tableElement = document.getElementById('data');
82             tableElement.innerHTML = '';
83             var itemCount = sessionStorage.length;
84             document.getElementById('count').innerHTML = itemCount;
85             for (var i = 0; i < itemCount; i++) {
86                 var key = sessionStorage.key(i);
87                 var val = sessionStorage.getItem(key);
88                 tableElement.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
89             }
90         }
91     </script>
92 </body>
93 </html>
复制代码

 

posted @   每天进步多一点  阅读(420)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2019-01-09 使用C#WebClient类访问(上传/下载/删除/列出文件目录)
2017-01-09 ADO.NET对象模型
2017-01-09 趣味理解ADO.NET对象模型
2017-01-09 C# ToString格式大全
2017-01-09 C#中A a=new B()的意义
2017-01-09 sql中时间的一些特殊转换
点击右上角即可分享
微信分享提示