sessionStorage、localStorage基础知识及应用

Web存储即在客户端存储数据。

在没有Web Storage之前，是通过cookie来在客户端存储数据的。但是由于
浏览器能存cookie数比较少。一个cookie最多可以存放4096B左右的数据
每次请求时，cookie都会存放在请求头中，传输到服务器端。但如果请求头大小超过了限制，服务器会处理不了。
Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

因此cookie不适合大量数据的存储。相比用Web Storage更适合存储大量数据:
每个域Chrome，Firefox和Opera是5M，IE是10M。 
请求时不会带web stroge的内容。

目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

localStorage在浏览器的隐私模式下面是不可读取的

localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

localStorage不能被爬虫抓取到，localStorage只支持string类型的存储。

localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

同源的判断规则：
http://www.test.com
https://www.test.com （不同源，因为协议不同）

http://my.test.com（不同源，因为主机名不同）

http://www.test.com:8080（不同源，因为端口不同）

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

Web Storage 提供的客户端存储数据的方法

包括localStorage和sessionStorage。他们都只能读写当前域的数据，区别是，localStorage存储的数据不会过期，sessionStorage存储的数据每次关闭浏览器后都会被清空。
现在很多浏览器都提供了“匿名访问”，“安全模式”，“隐身窗口”等等功能。在这种情况下，浏览器都是会重新建立一个新的localStorage，所以这些模式下的页面是没法访问在正常模式下的页面中的数据。
曾经，Firefox支持globalStorage：能读写所有域的存储数据的localStorage。但globalStorage没有成为标准。Firefox 13.0后被废弃了。更多见https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage 。

用法

localStorage和sessionStorage的api是一样的。这里以localStorage为例

写

/*
* value会被调用 .toString方法转化成字符串。因此，如果要储存的对象，调用JSON.stringify(obj)来序列化成字符串
*/
localStorage.setItem('key', 'value');

localStorage的写入有三种方法，这里就一一介绍一下

if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}

读

localStorage.getItem('key');
localStorage.key(index);//localStorage数组中下标是index的key

使用key()方法，向其中出入索引即可获取对应的键

删除

localStorage.removeItem('key');//删除某一个localStorage
localStorage.clear();//清空所有localStorage

将localStorage的所有内容清除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

 

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){

window.addEventListener("storage",handle_storage,false); 

}else if(window.attachEvent){

window.attachEvent("onstorage",handle_storage); 

} function handle_storage(e){ 	if(!e){e=window.event;}	 }

storage事件对象的具体属性如下表：

事件属性	描述
key	返回发生改变的数据项的键名 默认空字符串
oldValue	返回发生改变的数据项的旧值  默认null
newValue	返回发生改变的数据项的新值  默认null
url	返回发生改变的数据的页面所对应的url  默认空字符串
storageArea	返回代表所属的storage对象  默认null

PS:在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题,chrome修改localStorage能触发本页面的storage事件，Firefox 自身页面修改storage后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.实例推荐PrimeTechBlog的初试WebStorage之localstorage

　　所以建议，为兼容浏览器或者自己写兼容处理函数，或者干脆不用storage事件。

遍历

var output = "LOCALSTORAGE DATA:\n------------------------------------\n";
if (window.localStorage) {
if (localStorage.length) {
for (var i = 0; i < localStorage.length; i++) {
output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '\n';
}
} else {
output += 'There is no data stored for this domain.';
}
} else {
output += 'Your browser does not support local storage.'
}
console.log(output);

JSON和localStorage相互转换

 一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}

 

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

   //      1、存储前转换为json串的形式，取出后转换为json对象形式可以当做数组直接用；  

    //     2、无论存储前是什么数据类型  取出来之后他都会是一个字符串（string）类型  

    //     3、存储字符串时，取出来就直接可以用。  

    //     4、特别注意，当你存储一个对象的时候，必须先转换为json串存储，不然对象就没法用了  

localStorage.pagecount和sessionStorage.pagecount应用

localStorage.pagecount用户访问页面的次数，

sessionStorage.pagecount对用户在当前
session 中访问页面的次数进行计数

例1：做客户端的时候想加一个功能，就是当用户首次使用本软件的时候弹出一个窗口显示软件的使用教程，类似QQ啊其他软件一样

事件属性	描述
key	返回发生改变的数据项的键名 默认空字符串
oldValue	返回发生改变的数据项的旧值  默认null
newValue	返回发生改变的数据项的新值  默认null
url	返回发生改变的数据的页面所对应的url  默认空字符串
storageArea	返回代表所属的storage对象  默认null