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>
分类:
H5
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题: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中时间的一些特殊转换