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;
　　　　　　})()

 } } }

参考资料：

　　https://developer.mozilla.org/zh-CN/docs/Web/API/Storage