WebStorage
2019-11-13 10:46:18 by冲冲
1. 概况
- 早期浏览器的本地存储使用cookie，当前推荐使用Web Storage。
- Web Storage的数据以"键/值对"存在，Web网页的数据只允许该网页访问使用。
2. 浏览器支持
- Internet Explorer 7 及更早IE版本不支持Storage。
- IE8+、FireFox、Opera、Chrome、Safari已经支持Storage。
- 使用storage之前，应该检查浏览器是否支持Storage。
1 if(typeof(Storage)!=="undefined") 2 { 3 // 支持localStorage和sessionStorage对象 4 // 业务代码..... 5 } else { 6 // 不支持web存储 7 }
3. Storage分类
- localStorage：用于长期保存该网站的数据，数据的存储时间没有限制，直到手动去除。
- sessionStorage：用于临时保存该网站的数据，在关闭窗口或标签页之后将会删除这些数据。
4. Storage作用域
作用域：隔离开不同页面之间的localStorage（例如：百度页面不能读到腾讯页面的localStorage）。
- localStorage作用域：相同的协议、相同的主机名、相同的端口。
- sessionStorage作用域：相同的协议、相同的主机名、相同的端口、相同窗口/浏览器标签页。
5. API
localStorage和sessionStorage使用的API相同，常用的有（以localStorage为例）
① 保存数据：localStorage.setItem(key,value);
② 读取数据：localStorage.getItem(key);
③ 删除单个数据：localStorage.removeItem(key);
④ 删除所有数据：localStorage.clear();
⑤ 得到某个索引的key：localStorage.key(index);
1 // 存储 2 localStorage.sitename = "菜鸟教程"; 3 // 查找 4 document.getElementById("result").innerHTML = localStorage.sitename; 5 // 移除 6 localStorage.removeItem("sitename");
6. 数据类型
键/值对通常以字符串存储，可以按需要转换数据类型。
1 // 该实例展示用户点击按钮的次数，期望将代码中的字符串值转换为数字类型 2 if (localStorage.clickcount) 3 { 4 localStorage.clickcount=Number(localStorage.clickcount)+1; 5 } 6 else 7 { 8 localStorage.clickcount=1; 9 } 10 document.getElementById("result").innerHTML=" 你已经点击按钮 " + localStorage.clickcount + " 次 ";
7. sessionStorage
sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
1 if (sessionStorage.clickcount) 2 { 3 sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; 4 } 5 else 6 { 7 sessionStorage.clickcount=1; 8 } 9 document.getElementById("result").innerHTML="在这个会话中你已经点击该按钮 " + sessionStorage.clickcount + " 次 ";
8. 应用实例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5本地存储之WebStorage</title> 6 </head> 7 <body> 8 <div style="border: 2px dashed #ccc;320px;text-align:left;"> 9 <label for="keyname">别名(key):</label> 10 <input type="text" id="keyname" name="keyname" class="text"/> 11 <br/> 12 <label for="sitename">网站名：</label> 13 <input type="text" id="sitename" name="sitename" class="text"/> 14 <br/> 15 <label for="siteurl">网 址：</label> 16 <input type="text" id="siteurl" name="siteurl"/> 17 <br/> 18 <input type="button" onclick="save()" value="新增记录"/> 19 <hr/> 20 <label for="search_phone">输入别名(key)：</label> 21 <input type="text" id="search_site" name="search_site"/> 22 <input type="button" onclick="find()" value="查找网站"/> 23 <p id="find_result"><br/></p> 24 </div> 25 <br/> 26 <div id="list"> 27 </div> 28 <script> 29 //保存数据 30 function save(){ 31 var site = new Object; 32 site.keyname = document.getElementById("keyname").value; 33 site.sitename = document.getElementById("sitename").value; 34 site.siteurl = document.getElementById("siteurl").value; 35 var str = JSON.stringify(site); // 将对象转换为字符串 36 localStorage.setItem(site.keyname,str); 37 alert("保存成功"); 38 } 39 //查找数据 40 function find(){ 41 var search_site = document.getElementById("search_site").value; 42 var str = localStorage.getItem(search_site); 43 var find_result = document.getElementById("find_result"); 44 var site = JSON.parse(str); 45 find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl; 46 } 47 48 //将所有存储在localStorage中的对象提取出来，并展现到界面上 49 //确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错 50 function loadAll(){ 51 var list = document.getElementById("list"); 52 if(localStorage.length>0){ 53 var result = "<table border='1'>"; 54 result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>"; 55 for(var i=0;i<localStorage.length;i++){ 56 var keyname = localStorage.key(i); 57 var str = localStorage.getItem(keyname); 58 var site = JSON.parse(str); 59 result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>"; 60 } 61 result += "</table>"; 62 list.innerHTML = result; 63 }else{ 64 list.innerHTML = "数据为空..."; 65 } 66 } 67 </script> 68 </body> 69 </html>