sessionStorage & localStorage & cookie

概念

• html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage。
• sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀
• localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
• Cookie指某些網(wǎng)站為了辨別用戶身份、進(jìn)行session跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。

用途

• sessionStorage
• localStorage
• Cookie: 服務(wù)器可以利用Cookies包含信息的任意性來(lái)篩選并經(jīng)常性維護(hù)這些信息，以判斷在HTTP傳輸中的狀態(tài)。Cookies最典型的應(yīng)用是判定注冊(cè)用戶是否已經(jīng)登錄網(wǎng)站，用戶可能會(huì)得到提示，是否在下一次進(jìn)入此網(wǎng)站時(shí)保留用戶信息以便簡(jiǎn)化登錄手續(xù)，這些都是Cookies的功用。另一個(gè)重要應(yīng)用場(chǎng)合是“購(gòu)物車”之類處理。用戶可能會(huì)在一段時(shí)間內(nèi)在同一家網(wǎng)站的不同頁(yè)面中選擇不同的商品，這些信息都會(huì)寫入Cookies，以便在最后付款時(shí)提取信息。

特點(diǎn)

• 內(nèi)存大小 :
  • 單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
  • localStorage中一般瀏覽器支持的是5M大小，這個(gè)在不同的瀏覽器中l(wèi)ocalStorage會(huì)有所不同。
• 存儲(chǔ)位置 : cookie是在客戶端保存的方案.而session是在服務(wù)端保存的方案.
• 生命周期 :
  • localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在
  • sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁(yè)，一旦窗口或標(biāo)簽頁(yè)被永久關(guān)閉了，那么所有通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)也就被清空了。
  • cookie是在客戶端保存的方案.而session是在服務(wù)端保存的方案.如果cookie不設(shè)定時(shí)間的話就表視它的生命周期為瀏覽器會(huì)話的期間,只要關(guān)閉IE,cookie就消失了這種cookie被稱為會(huì)話cookie.其一般不保存在硬盤上.而是保存在內(nèi)存中.如果設(shè)置了過(guò)期時(shí)間.那么瀏覽器會(huì)把cookie保存到硬盤中,再次打IE時(shí)會(huì)依然有效.直到它的有效期超時(shí);注:存儲(chǔ)在硬盤中的cookie可以在不同IE間共享;
• 不同瀏覽器無(wú)法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁(yè)面間可以共享相同的localStorage（頁(yè)面屬于相同域名和端口），但是不同頁(yè)面或標(biāo)簽頁(yè)間無(wú)法共享sessionStorage的信息。這里需要注意的是，頁(yè)面及標(biāo)簽頁(yè)僅指頂級(jí)窗口，如果一個(gè)標(biāo)簽頁(yè)包含多個(gè)iframe標(biāo)簽且他們屬于同源頁(yè)面，那么他們之間是可以共享sessionStorage的。
• 他們均只能存儲(chǔ)字符串類型的對(duì)象

操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

存儲(chǔ) setItem

用途：將value存儲(chǔ)到key字段

用法：.setItem( key, value)

sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

獲取 getItem

用途：獲取指定key本地存儲(chǔ)的值

用法：.getItem(key)

var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

刪除 removeItem

用途：刪除指定key本地存儲(chǔ)的值

用法：.removeItem(key)

sessionStorage.removeItem("key"); localStorage.removeItem("site");

清空 clear

用途：清除所有的key/value

用法：.clear()

sessionStorage.clear(); localStorage.clear();

轉(zhuǎn)載于:https://www.cnblogs.com/sweetBug/p/5847781.html

總結(jié)

以上是生活随笔為你收集整理的sessionStorage localStorage cookie的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。