H5 web 存储之 Webstorage

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

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

webStorage的局限性：

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

使用webStorage
1.存储数据：
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基本使用的一些小总结，希望可以对你有所帮助。

当前名称：H5 web 存储之 Webstorage
当前地址：https://www.cdcxhl.com/news38/166138.html

成都网站建设公司_创新互联，为您提供服务器托管、网站改版、企业建站、定制开发、网站建设、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联