H5 web 存储之 Webstorage

H5提供了两种在客户端存储数据的方式：localStorage 持久化的本地存储（浏览器关闭重新打开数据依然存在）sessionStorage 针对一个session的本地存储之前这些都是由cookie来完成的，cookie的特点是存储量小，在服务器和客户端之间来回传递，传输效率不高。一般可以在判断注册的用户是否登录该本网站。webStorage API 继承于Window对象，并提供了两个新的属性-Window.localStorage 和 Window.sessionStorage.webStorage的优势：

相比cookie存储容量增加可以将请求的表单数据存于本地，减少http请求，节约带宽webStorage拥有易用的API

webStorage的局限性：

不同浏览器webStorage 和LocalStorage的大小不统一。在浏览器的隐私模式下面是不可读取的本质上是对字符串的读取，因此存储内容过多时页面会变卡不能被爬虫抓取到

使用webStorage1.存储数据： 　　localStorage.name = 'value'; 　　localStorage['name'] = 'value'; 　　localStorage.setItem('name','value'); 　　注意键和值总是字符串。建议使用webStorage API(setItem,getItem,removeItem,key,length)2.获取数据： 　　var value = localStorage.getItem('name'); 　　var value = localStorage.name; 　　var value = localStorage['name'];3.删除数据： 　　清空所有数据 　　　　localStorage.clear(); 　　删除特定数据； 　　　　localStorage.removeItem('name');4.检测浏览器是否支持： 　　function storageAvailable(type) { 　　　　try { 　　　　　　var storage = window[type], 　　　　　　x = '__storage_test__'; 　　　　　　storage.setItem(x, x); 　　　　　　storage.removeItem(x); 　　　　　　return true; 　　　　} 　　　　catch(e) { 　　　　　　return false; 　　　　} 　　} 　　if (storageAvailable('localStorage')) { 　　　　// Yippee! We can use localStorage awesomeness 　　} 　　else { 　　　　// Too bad, no localStorage for us 　　}5.就是存储对象了，我们需要进行转换为字符串存入，等到使用的时候取出再转为对象。　　var str = JSON.stringify(obj);　　localStorage.mydata = str;　　var obj = JSON.parse(localStorage.mydata);到这里就结束了，算是对webStorage基本使用的一些小总结，希望可以对你有所帮助。

转载于:https://www.cnblogs.com/zgh-blog/p/SavourHoumor.html