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