HTML5本地存储

======================================
H5本地存储 http://four.haser.top/
======================================

http和https协议是无状态的

cookie
容量4KB
方法比较单一 只有set和get
跨域的问题
浏览器可以禁用cookie
cookie存在于前后端

Storage
容量5MB
www.baidu.com
www.google.com
不会出现跨域问题
IE8或之前的版本不支持Storage
Storage只存在于客户端，使用js操作

1.localStorage
2.sessionStorage

api一样
生命周期不一样
localStorage，永久保存，存在客户端（文件方式）
sessionStorage，和会话的生命周期一致

B/S
存储数据：
服务器
pageContext\request\session\application
安全、方便
占用服务器资源

客户端
Cookie
灵活
不安全、存储量有限(4KB)、可以被禁用

概念：
使用HTML5可以在本地存储用户的浏览数据。

早些时候，本地存储使用的是 cookie。但是Web存储需要更加的安全与快速。
这些数据不会被保存在服务器，只用于用户请求网站数据情况。
可以存储大量的数据，而不影响网站的性能。

数据以 键/值 对存在，web网站的数据只允许该网页访问使用。

★★★★不能跨域

只能存储String类型，如果需要存储对象，推荐使用json

key:String
value:Object

一、Storage
1.本地存储器
2.会话存储器(属于本地存储器)

区别：
localStorage 和 sessionStorage 生命周期不同
localStorage永久有效
sessionStorage跟会话有关
实际开发中发现跟会话没有关系
当浏览器关闭之后，失效

因为H5新特性，在操作之前，需要判断浏览器是否支持Storage

市面上只IE8-版本不支持
if(!window.Storage){
//不支持Storage
}else{
//支持Storage
}

if(window.Storage){
//支持Storage
}else{
//不支持Storage
}

C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Local Storage

存储数据：(官方推荐使用第三种)
1.localStorage.属性名=值;
2.localStorage[属性名]=值;
3.localStorage.setItem(属性名,值);

取出数据：(官方推荐使用第三种)
//null 表示可能没有该变量；也可能表示变量有，但值是null
1.var value=localStorage.属性名;
2.var value=localStorage[属性名];
3.var value=localStorage.getItem(属性名);

属性：
localStorage.length 表示本地共存储了多少个变量

通过下标得到属性名(key)：
var key=localStorage.key(下标);

移除指定的变量：
localStorage.removeItem(属性名);

清除：
localStorage.clear();