H5 web 存储之 Webstorage
2018-06-24 00:58:37来源:未知 阅读 ()
H5提供了两种在客户端存储数据的方式:
localStorage 持久化的本地存储(浏览器关闭重新打开数据依然存在)
sessionStorage 针对一个session的本地存储
之前这些都是由cookie来完成的,cookie的特点是存储量小,在服务器和客户端之间来回传递,传输效率不高。一般可以在判断注册的用户是否登录该本网站。
webStorage API 继承于Window对象,并提供了两个新的属性-Window.localStorage 和 Window.sessionStorage.
webStorage的优势:
- 相比cookie存储容量增加
- 可以将请求的表单数据存于本地,减少http请求,节约带宽
- webStorage拥有易用的API
webStorage的局限性:
- 不同浏览器webStorage 和LocalStorage的大小不统一。
- 在浏览器的隐私模式下面是不可读取的
- 本质上是对字符串的读取,因此存储内容过多时页面会变卡
- 不能被爬虫抓取到
使用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基本使用的一些小总结,希望可以对你有所帮助。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- HTML基础教程_1 2020-06-09
- 转行WEB前端 感觉很迷茫 该怎么做? 2020-06-09
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 2020年Web前端开发工程师市场怎么样?学会什么技术才能拿到 2020-06-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash