本文属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');
}
<span id="4"></span>
注意事项 （安全性）
Cookie、localStorage 和 sessionStorage 并不适合所有数据，他们存在 XSS 注入的风险，所以千万不要用它们存储你系统中的敏感数据
网友评论