WebStorage 的应用—— sessionStorage

需求

初学者开发网页的时候会往往会遇到这样一种问题 —— 实现不同页面间的传值
很多时候我们需要将一些数据在本地进行存储：
例如：滚动的scrollTop（刷新页面的时候保持在同一个位置）
例如：在登录状态下进行页面的跳转（不同页面间获取用户的token）

那既然存在这样的需求，肯定就会有相应的解决方式

常用的解决方式有三种：cookie ，sessionStorage，localStorage
最先存在的是cookie，但是cookie由于自身的局限，于是有了后来的WebStorage

解决方法

一般用于辨别用户身份，进行 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 注入的风险，所以千万不要用它们存储你系统中的敏感数据