localStorage 和 sessionStorage的区别
存储对象：
在主流浏览器中，添加了html5 Web Storage API 的接口，storage是一个存储对象，它包括会话存储（session storage）或本地存储（local storage），它们分别有添加、修改或删除存储数据项的功能。
如果我们想要操作一个会话存储（session storage），可以使用 Window.localStorage对象，操作本地存储（local storage），可以使用 Window.sessionStorage对象。
localStorage介绍:
特征：
( 1 ).除非手动清除，否则永久保存在浏览器
( 1 ).存储大小一般为5MB
（3）.只存在于客户端（浏览器）中，不参与和服务器的通信
（4）.api使用简单，可以直接拿来使用，也可自己封装来对Object和Array有更好的支持
（5）.相同浏览器的不同页面间可以共享相同的 localStorage
（6）.不同浏览器无法共享localStorage或sessionStorage中的信息
api方法介绍：
localstorage.setItem(key,value) //该方法接受键，值两个参数，如果键存在，就更新值
localstorage.getItem(key) //该方法接受一个参数值key,返回对应的value值
localstorage.key(index) //该方法一个number值，返回对应下标的key
localstorage.removeItem(key) //该方法接受一个参数值key,把当前key，value从localstorage中删除
localstorage.clear() //该方法 清除对象中所有的key，value
对localStorage进行封装，可以兼容ie低版本浏览器（通过cookie来做兼容）:
var local_storage = {};
local_storage = {
if(!window.localStorage){//当浏览器不支持localstorage的时候，采用cookie来代替localstorage
return{
getItem: function (sKey) {
if(!sKey || !this.hasOwnProperty(sKey)) { return null; }
return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
},
key: function (nKeyId) {
return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
},
setItem: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
this.length = document.cookie.match(/\=/g).length;
},
length: (function(){
return (document.cookie.match(/\=/g) || window.localStorage).length;
})(),
removeItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
this.length--;
},
hasOwnProperty: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
}
};
}else{
return {
setItem:function(key,value){
window.localStorage.setItem(key,value);
},
getItem:function(key){
console.log(key);
return window.localStorage.getItem(key);
},
removeItem:function(key){
window.localStorage.removeItem(key);
},
removeAll:function(){
window.localStorage.clear();
},
length:(function(){
return window.localStorage.length;
})()
}
}
}
sessionStorage介绍:
特征：
（1）.仅在当前会话下有效，浏览器被关闭或当前页面被关闭的情况下清除
（2）.存储大小一般为5MB
（3）.只存在于客户端（浏览器）中，不参与和服务器的通信
（4）.api使用简单，可以直接拿来使用，也可自己封装来对Object和Array有更好的支持
（5）.不同页面或标签页间无法共享sessionStorage的信息
（6）.不同浏览器无法共享localStorage或sessionStorage中的信息
api方法介绍：
sessionStorage.setItem(key,value) //该方法接受键，值两个参数，如果键存在，就更新值
sessionStorage.getItem(key) //该方法接受一个参数值key,返回对应的value值
sessionStorage.key(index) //该方法一个number值，返回对应下标的key
sessionStorage.removeItem(key) //该方法接受一个参数值key,把当前key，value从sessionStorage中删除
sessionStorage.clear() //该方法 清除对象中所有的key，value
对sessionStorage进行封装，可以兼容ie低版本浏览器（通过cookie来做兼容）:
var session_storage = {}; session_storage = { if(!window.localStorage){//当浏览器不支持localstorage的时候，采用cookie来代替localstorage return{
getItem: function (sKey) {
if(!sKey || !this.hasOwnProperty(sKey)) { return null; }
return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
},
key: function (nKeyId) {
return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
},
setItem: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
this.length = document.cookie.match(/\=/g).length;
},
length: (function(){
return (document.cookie.match(/\=/g) || window.sessionStorage).length;
})(),
removeItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
this.length--;
},
hasOwnProperty: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
}
};
}else{ return {
setItem:function(key,value){
window.sessionStorage.setItem(key,value);
},
getItem:function(key){
console.log(key);
return window.sessionStorage.getItem(key);
},
removeItem:function(key){
window.sessionStorage.removeItem(key);
},
removeAll:function(){
window.sessionStorage.clear();
},
length:(function(){
return window.sessionStorage.length;
})()
}
}
}
