localStorage、sessionStorage、Cookie的區別及用法

一、webstorage

本地存儲，存儲在客戶端，包括localStorage和sessionStorage。

(1)localStorage：生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。

(2)sessionStorage：僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持。

(3)localStorage和sessionStorage使用時使用相同的API：

localStorage.setItem("key","value");//以「key」爲名稱存儲一個值「value」

localStorage.getItem("key");//獲取名稱爲「key」的值

localStorage.removeItem("key");//刪除名稱爲「key」的信息。

localStorage.clear();​//清空localStorage中全部信息

 

二、Cookie

生命期爲只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。 存放數據大小爲4K左右 。有個數限制（各瀏覽器不一樣），通常不能超過20個。與服務器端通訊：每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題。但Cookie須要程序員本身封裝，源生的Cookie接口不友好(http://www.jb51.net/article/6...)。

(1)cookie的優勢：具備極高的擴展性和可用性

1.經過良好的編程，控制保存在cookie中的session對象的大小。

2.經過加密和安全傳輸技術，減小cookie被破解的可能性。

3.只有在cookie中存放不敏感的數據，即便被盜取也不會有很大的損失。

4.控制cookie的生命期，使之不會永遠有效。這樣的話偷盜者極可能拿到的就 是一個過時的cookie。

(2)cookie的缺點：

1.cookie的長度和數量的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB。不然會被截掉。

2.安全性問題。若是cookie被人攔掉了，那我的就能夠獲取到全部session信息。加密的話也不起什麼做用。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務端保存一個計數器。若吧計數器保存在客戶端，則起不到什麼做用。

4. 針對網站(協議 域名 端口)而言 ,把一些數據存放在該網站的打開的瀏覽器的文件夾下面的

(3)使用方法：

1.裏面的名稱是惟一的 存放的時候若是名稱不在就新增一個 若是在就更新該名稱所對應的內容

2.增長 刪除 修改 利用的key的惟一性

3.cookie的完整存儲形式：鍵=值;expires=失效時間;domain=域名訪問;

4.cookie的限制：Chrome和Safari沒有對cookie的個數作限制，通常瀏覽器限制同一域名數量爲50個，cookie文件的總大小通常爲4KB（同一個域名）

5.一次建立多個cookie：可使用 「&」進行分割。在cookie 的名或值中不能有：分號（;）、逗號（,）、等號（=）以及空格

6.對於中文怎麼辦

中文編碼問題，使用encodeURIComponent('xxxxx')編碼，再使用decodeURIComponent(document.cookie)解碼，能解決中文亂碼問題

給document.cookie賦值，並不會覆蓋原來的值，除非鍵是同樣的。 如：      document.cookie=「userId=007」;       document.cookie=「userName=江民";

是給cookie中增長了兩對鍵值對。

 7.cookie的域名問題(指定可訪問cookie的主機名 )：必須在綁定域名的服務器上才能夠設置域名，而且只能設置綁定的域名，也就是說，不一樣服務器間的cookie文件不共享

8.document.cookie = key + "=" + value + "；expires=" + date + "；path=/" + "；domain=" + yuming

 

三、做用域不一樣

不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的 localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標 籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

 

四、函數封裝

(1)獲取指定cookie值

 @param name {string} cookie名稱

 

function getCookie (name)  {

　　var value = null;

　　if (name != null) {

　　let v = new RegExp("(?:^|; )" + name + "=([^;]*)").exec(document.cookie);

　　value = v? decodeURIComponent(v[1]) : null;

　　}

　　return value;

}

 

(2)設置cookie

@param cookieName {string} cookie名稱

@param cookieValue {string} cookie值

@param outTime {number} 過時時間，單位是秒

@param path {string} cookie的做用域

@param domain {string} cookie的做用域

 

function setCookie (cookieName, cookieValue, outTime, attribute) {

　　try {

　　　　let str = cookieName + '=' + encodeURIComponent(cookieValue); // 編碼以適合任何瀏覽器

　　　　if (outTime) {

　　　　　　let mm = outTime * 1000;

　　　　　　let date = new Date();

　　　　　　date.setTime(date.getTime() + mm);

　　　　　　str += ';expires=' + date.toGMTString();

　　　　}

　　　　if (attribute && attribute.domain) {

　　　　　　str += ';domain=' + attribute.domain;

　　　　}

　　　　　　let path = (attribute && attribute.path) || '/';

　　　　　　str += ';path=' + path;

　　　　　　document.cookie = str;

　　} catch (a) {

　　　　console.log(a);

　　}

}

function setCookieForAdmin (cookieName, cookieValue, outTime)  {

　　let domain = null;

　　if (/console.yilule.com/.test(location.host)) {

　　　　domain = '.console.yilule.com'

　　}

　　setCookie(cookieName, cookieValue, outTime, { domain: domain })

}

 

(3)sessionStore存儲數據，

若是瀏覽器不支持sessionstore則存儲到cookie中，過時時間是cookie的默認時間，瀏覽器關閉即失效

@param key {string} 名稱

@param value {string} 值

 

function setSessionStore  (key, value) {

　　if (!key) {

　　　　console.log('鍵值不能爲空')

　　　　return false;

　　}

　　if (window.sessionStorage) {

　　　　try {

　　　　　　window.sessionStorage.setItem(key, value);

　　　　} catch (e) {

　　　　　　setCookie(key, value);

　　　　}

　　} else {

　　　　setCookie(key, value);

　　}

}

 

(4) 獲取sessionsrore中存儲的值。

 若是瀏覽器不支持sessionstore則從cookie中獲取

@param key {string} 名稱

 

function getSessionStore  (key)  {

　　let value = null;

　　if (!key) {

　　　　return value;

　　 }

　　if (window.sessionStorage) {

　　　　value = window.sessionStorage.getItem(key);

　　　　if (!value) {

　　　　　　value = getCookie(key);

　　　　}

　　} else {

　　　　value = getCookie(key);

　　}

　　　return value;

}

 

(5) 清除sessionStore指定數據

@param key {string} 名稱

 

function clearSessionStore (key)  {

　　if (window.sessionStorage) {

　　　　try {

　　　　　　window.sessionStorage.removeItem(key);

　　　　} catch (e) {

　　　　　　setCookie(key, "", -1);

　　　　}

　　} else {

　　　　setCookie(key, "", -1);

　　}

}

 

(6) localStore存儲數據，

localStore存儲數據，過時時間是cookie的默認時間，瀏覽器關閉即失效

@param key {string} 名稱

@param value {string} 值

 

function setLocalStore (key, value) {

　　if (window.localStorage) {

　　　　try {

　　　　　　window.localStorage.setItem(key, value);

　　　　} catch (e) {

　　　　　　setCookie(key, value);

　　　　}

　　} else {

　　　　setCookie(key, value);

　　}

}

 

(7) localStore存儲數據。

localStore存儲數據則從cookie中獲取

@param key {string} 名稱

 

function getLocalStore  (key) {

　　let value = null;

　　if (window.localStorage) {

　　　　try {

　　　　　　value = window.localStorage.getItem(key);

　　　　　　if (!value) {

　　　　　　　　value = getCookie(key);

　　　　　　}

　　　　} catch (e) {

　　　　　　value = getCookie(key);

　　　　}

　　} else {

　　　　value = getCookie(key);

　　}

　　　　return value;

}

 

(8) 清除localStore指定數據

@param key {string} 名稱

 

function clearLocalStore (key) {

　　if (window.localStorage) {

　　　　try {

　　　　　　window.localStorage.removeItem(key);

　　　　} catch (e) {

　　　　setCookie(key, "", -1);

　　　　}

　　} else {

　　　　setCookie(key, "", -1);

　　}

}

 

(9)清除localCookie指定數據

@param key {string} 名稱

 

function clearCookie  (key) {

　　if (/console.yilule.com/.test(location.host)) {

　　　　setCookieForAdmin(key, "", -1);

　　} else {

　　　　setCookie(key, "", -1);

　　}

}

 

(10) 清除localCookie指定數據

 @param key {string} 名稱

 

function clearCookieWireless  (key) {

　　if (/16le.com/.test(location.host)) {

　　　　setCookie(key, "", -1, { domain: ".16le.com" });

　　} else if (/yilule.com/.test(location.host)) {

　　　　setCookie(key, "", -1, { domain: ".yilule.com" });

　　} else {

　　　　setCookie(key, "", -1);

}

}

 

五、簡單版

設置cookie

function setCookie(key, value, days) {

　　var date = new Date();

　　date.setDate(date.getDate() + days);

　　document.cookie = key + "=" + value + ";expires=" + date;

}

 

function setCookie(key, value, days) {

　　var date = new Date();

　　if (days) { //時間有值 就設置過時時間

　　　　date.setDate(date.getDate() + days);

　　　　document.cookie = key + "=" + value + ";expires=" + date;

　　} else {

　　　　document.cookie = key + "=" + value;

　　} 

}

 

function setCookie(key, value, days, path){

　　path = path || "/";

　　var date = new Date();

　　if(days){

　　　　date.setDate(date.getDate()+days);

　　　　document.cookie = key +"="+value+";expires="date+";path="path;

　　}else{

　　　　document.cookie = key + "=" +value+";path="path;

　　}

}

 

function setCookie(key, value, days, path) {

　　path = path || "/";

　　var date = new Date();

　　if (days) {

　　　　date.setDate(date.getDate() + days);

　　　　document.cookie = key + "=" + encodeURIComponent(value) + ";expires=" + date + ";path=" + path;

　　} else {

　　　　document.cookie = key + "=" + encodeURIComponent(value) + ";path=" + path;

　　}

}

 

獲取cookie

function getCookie(key) {

　　var str = document.cookie; //是一個字符串

　　if (str) {

　　　　var cookieList = str.split("; "); //全部cookie的集合["key1=value1","key2=value2","key3=value3"]

　　　　for (var i = 0; i < cookieList.length; i++) {

　　　　　　var cookie = cookieList[i]; //key1=value1 ; key2=value2 ;key3=value3

　　　　　　var itemList = cookie.split("="); //分別取出key value

　　　　　　var itemKey = itemList[0];

　　　　　　var itemValue = itemList[1];

　　　　　　if (itemKey == key) { //找到cookie

　　　　　　　　return itemValue;

　　　　　　}

　　　　}

　　　　　　return "";

　　} else {

　　　　return "";

　　}

}

 

 還有什麼不懂的，能夠逛逛這個博主的網站http://www.javashuo.com/article/p-ktqjhggg-nb.html