WebStorage 的应用—— sessionStorage
本文章属xxKarina原创,转载请注明
个人博客地址:https://xxkarina.github.io/
需求
初学者开发网页的时候会往往会遇到这样一种问题 —— 实现不同页面间的传值
很多时候我们需要将一些数据在本地进行存储:
例如:滚动的scrollTop(刷新页面的时候保持在同一个位置)
例如:在登录状态下进行页面的跳转(不同页面间获取用户的token)
那既然存在这样的需求,肯定就会有相应的解决方式
常用的解决方式有三种:cookie ,sessionStorage,localStorage
最先存在的是cookie,但是cookie由于自身的局限,于是有了后来的WebStorage
解决方法
cookie (储存在用户本地终端上的数据)
一般用于辨别用户身份,进行 session 跟踪而存储在用户本地终端,称为浏览器缓存,提供了很大的遍历,但是依然有很多的不足
cookie的优点:
- 可配置时间: 用户可配置cookie的到期规则,时间长短自定义
- 轻量级结构: 基于文本,存储简单的键值对
- 数据持久: cookie通常是客户端上持续时间最长的数据保留形式
cookie的不足:
- 数据大小限制: cookie的大小限制在4KB左右,只能存储一些字段以及简单的值信息,但是不能很好的处理复杂的逻辑需求
- 安全限制: cookie在http请求中是明文传输,cookie可能会被篡改
- 被用户禁用: 用户可以在本地配置cookie禁用,因此浏览器或客户端设备接受cookie的能力,不得以实现
- 请求增负: cookie会附加在每个http请求中,例如HttpRequest 和HttpResponse的header
WebStorage
localStorage (持久数据存储)
localStorage是H5中添加的技术,是WebStorage的一种
WebStorage是HTML新增的本地存储方案之一,解决了cookie的存储局限问题
WebStorage提供两种API:localStorage和sessionStorage
WebStorage一般提供的5M的存储空间
WebStorage不作为HTTP header 发送至浏览器,相对安全
关于WebStorage的兼容性
浏览器 | 兼容 |
---|---|
IE | 8.0+ |
Firefox | 3.0+ |
Opera | 10.5+ |
Chrome | 4.0+ |
Safari | 4.0+ |
iPhone | 2.0+ |
Android | 2.0+ |
在IE7、IE6中可以使用IE User Data实现。
sessionStorage (临时数据存储)
sessionStorage是H5中添加的技术,是WebStorage的一种
特性 | cookie | localStorage | sessionStorage |
---|---|---|---|
数据的生命期 | 可设置失效时间,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
代码示例 (用法demo)
.setItem( key, value)//存键值数据
sessionStorage.setItem("key","value");
localStorage.setItem("key","value");
.getItem(key)//根据key获取value
var value=sessionStorage.getItem("key");
var value=localStorage.getItem("key");
.removeItem(key)//删除指定键值
sessionStorage.removeItem("key");
localStorage.removeItem("key");
.clear()//清空所有
sessionStorage.clear();
localStorage.clear();
// 判断浏览器是否支持
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
注意事项 (安全性)
Cookie、localStorage 和 sessionStorage 并不适合所有数据,他们存在 XSS 注入的风险,所以千万不要用它们存储你系统中的敏感数据