八、前端開(kāi)發(fā)語(yǔ)言體系-JavaScript 客戶端存儲(chǔ)

文章目錄

• 八、前端開(kāi)發(fā)語(yǔ)言體系-JavaScript 客戶端存儲(chǔ)
• • JavaScript 客戶端存儲(chǔ)
  • • 客戶端存儲(chǔ)簡(jiǎn)介
    • Cookie
    • LocalStorage
    • SessionStorage
  • 參考文章

JavaScript 客戶端存儲(chǔ)

客戶端存儲(chǔ)簡(jiǎn)介

在前端開(kāi)發(fā)過(guò)程中，為了與服務(wù)器更方便的交互或者提升用戶體驗(yàn)，我們都會(huì)在客戶端（用戶）本地保存一部分?jǐn)?shù)據(jù)。Web應(yīng)用允許使用瀏覽器提供的 API 實(shí)現(xiàn)將數(shù)據(jù)存儲(chǔ)到用戶的電腦上。

客戶端存儲(chǔ)的方案：

傳統(tǒng)：

• Cookie：把信息存儲(chǔ)到客戶端的瀏覽器中（但是項(xiàng)目服務(wù)器端也是可以獲取COOKIE的）
• Session：把信息存儲(chǔ)到服務(wù)器上的（服務(wù)器存儲(chǔ)）

HTML5：WebStorage

• LocalStorage：永久存儲(chǔ)在客戶端的本地
• SessionStorage：信息的會(huì)話存儲(chǔ)，會(huì)話窗口存在信息也存在，會(huì)話窗口關(guān)閉信息就消失了（針對(duì) Session 的數(shù)據(jù)存儲(chǔ)）

我們可以認(rèn)為，傳統(tǒng)的 Session 存儲(chǔ)會(huì)被 SessionStorage 所替代，這里不再對(duì)它進(jìn)行介紹。

Cookie

Cookie是指Web瀏覽器存儲(chǔ)的少量數(shù)據(jù)，用于瀏覽器存儲(chǔ)會(huì)話信息，每個(gè)Cookie的大小一般不能超過(guò)4KB。cookie默認(rèn)的有效期很短暫，它只能持續(xù)在Web瀏覽器的會(huì)話期間，一旦用戶關(guān)閉瀏覽器，cookie保存的數(shù)據(jù)就會(huì)丟失。

Cookie保存以下幾方面的信息：

• Cookie的名字
• Cookie的值
• 到期時(shí)間
• 所屬域名（默認(rèn)是當(dāng)前域名）
• 生效的路徑（默認(rèn)是當(dāng)前網(wǎng)址）

Cookie的值必須寫(xiě)成“key=value”的形式，等號(hào)兩邊不能有空格。而且在寫(xiě)入Cookie的時(shí)候，必須對(duì)分號(hào)、逗號(hào)和空格進(jìn)行轉(zhuǎn)義（它們都不允許作為Cookie的值）。

document.cookie屬性是可寫(xiě)的，可以通過(guò)它為當(dāng)前網(wǎng)站添加Cookie。document.cookie一次只能寫(xiě)入一個(gè)Cookie，這個(gè)寫(xiě)入并不是覆蓋，而是添加。

如果要延長(zhǎng)cookie的有效期，就需要設(shè)置max-age屬性來(lái)指定cookie的有效期（單位是秒）

document.cookie = 'test1=hello'; document.cookie = 'test2=world'; document.cookie = 'user=TG;max-age=606024'; //將有效期設(shè)置為一天 document.cookie //讀取當(dāng)前頁(yè)面的所有cookie // test1=hello; test2=world; user=TG

除了Cookie本身的內(nèi)容，還有一些可選的屬性也是可以寫(xiě)入的，它們都必須以分號(hào)分隔。

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure][; max-age=number]

• value屬性
  • value屬性是必需的。它是一個(gè)鍵值對(duì)，用于指定Cookie的值
• expires屬性
  • expires屬性用于指定Cookie過(guò)期時(shí)間。如果不設(shè)置該屬性，或者設(shè)為null，Cookie只在當(dāng)前會(huì)話有效，瀏覽器窗口一旦關(guān)閉，該Cookie就會(huì)被刪除。
• domain屬性
  • domain屬性指定Cookie所在的域名。如果未指定，默認(rèn)為設(shè)定該Cookie的域名，所指定的域名必須是當(dāng)前發(fā)送Cookie的域名的一部分。
  • 只有訪問(wèn)的域名匹配domain屬性，Cookie才有可能發(fā)送到服務(wù)器。
• path屬性
  • path屬性用來(lái)指定cookie存儲(chǔ)路徑，必須是絕對(duì)路徑，如果未指定，默認(rèn)為請(qǐng)求該Cookie的網(wǎng)頁(yè)路徑。
  • path屬性生效的前提是domain屬性匹配。只有path屬性匹配向服務(wù)器發(fā)送的路徑，Cookie才會(huì)發(fā)送。（這里的匹配不是絕對(duì)匹配，而是從根路徑開(kāi)始，只要path屬性匹配發(fā)送路徑的一部分，就可以發(fā)送。）
• secure屬性
  • secure屬性用來(lái)指定Cookie只能在加密協(xié)議HTTPS下發(fā)送到服務(wù)器。
  • 該屬性只是一個(gè)開(kāi)關(guān)，不需要指定值。如果通信是HTTPS協(xié)議，該開(kāi)關(guān)自動(dòng)打開(kāi)。
• max-age屬性
  • max-age屬性用來(lái)指定Cookie有效期，以秒為單位。

瀏覽器對(duì)Cookie數(shù)量的限制，規(guī)定不一樣。目前，Firefox是每個(gè)域名最多設(shè)置50個(gè)Cookie，而Safari和Chrome沒(méi)有域名數(shù)量的限制。

所有Cookie的累加長(zhǎng)度限制為4KB。超過(guò)這個(gè)長(zhǎng)度的Cookie，將被忽略，不會(huì)被設(shè)置。

Cookie實(shí)例：

function setCookie(cname, cvalue, exdays) {//創(chuàng)建cookie，三個(gè)參數(shù)分別為：鍵、值、保存的天數(shù)var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires="+d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }function getCookie(cname) {//查找鍵為“cname”的cookievar name = cname + "=";var ca = document.cookie.split(';');for(var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(1);}if (c.indexOf(name) == 0) {return c.substring(name.length, c.length);}}return ""; } function delCookie(cname){//刪除鍵為“cname”的cookie/*刪除 cookie 非常簡(jiǎn)單，不必指定 cookie 值，直接把 expires參數(shù)設(shè)置為過(guò)去的日期即可*/var exp = new Date();exp.setTime(exp.getTime() - 1);var cval=getCookie(name);if(cval!=null)document.cookie= cname + "="+cval+";expires="+exp.toGMTString(); }setCookie("name","bolly",10); getCookie("name"); delCookie("name");

LocalStorage

優(yōu)勢(shì)：

LocalStorage 拓展了 Cookie 的 4K 限制，這個(gè)相當(dāng)于一個(gè) 5M 大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù)，相比于 Cookie 可以節(jié)約帶寬。

LocalStorage用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)去刪除。

局限:

只有在高版本的瀏覽器中才支持 LocalStorage，比如 IE 瀏覽器只有 IE8 以上才進(jìn)行支持。

目前所有的瀏覽器中都會(huì)把 LocalStorage 的值類型限定為 String 類型，這個(gè)在對(duì)我們?nèi)粘１容^常見(jiàn)的 JSON 對(duì)象類型需要一些轉(zhuǎn)換。

LocalStorage在瀏覽器的隱私模式下面是不可讀取的。

LocalStorage本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁(yè)面變卡。

LocalStorage不能被爬蟲(chóng)抓取到。

LocalStorage 的使用也是遵循同源策略的，所以不同的網(wǎng)站是不能共用相同的 LocalStorage。

LocalStorage創(chuàng)建的是一個(gè)本地存儲(chǔ)的 name/value 對(duì)，寫(xiě)入和讀取各自有三種方式，官方推薦使用 setItem\getItem 這兩種方法對(duì)其進(jìn)行存取。

//寫(xiě)入 localStorage.setItem('user',101);//存儲(chǔ)一個(gè)以“user”為名字的值 localStorage["user"] = 101; localStorage.user = 101;//讀取 localStorage.getItem('user'); //讀取以“user”為名字的值 localStorage["user"] localStorage.user

建立了 LocalStorage 數(shù)據(jù)之后，我們可以使用 removeItem( ) 和 clear( ) 方法來(lái)刪除。

localStorage.removeItem('user');//刪除名為“user”的數(shù)據(jù)。 localStorage.clear(); //刪除所有存儲(chǔ)的數(shù)據(jù)

LocalStorage 中有一個(gè) key( ) 方法可以根據(jù)索引獲取到當(dāng)前的鍵值，一般用于遍歷存儲(chǔ)數(shù)據(jù)。

for(var i=0; i < localStorage.length; i++){ var name = localStorage.key(i); //獲取第 i對(duì)的名字 var datas = localStorage.getItem(name); //獲取該對(duì)的值 }

因?yàn)?LocalStorage 存儲(chǔ)的是 String 對(duì)象，如果我們想把 JSON 對(duì)象存入的話必須進(jìn)行轉(zhuǎn)換。

• JSON.stringify( ) 方法可以將 JSON 對(duì)象轉(zhuǎn)換成為 JSON 字符串
• JSON.parse( ) 方法可以將 JSON 字符串轉(zhuǎn)換成為 JSON 對(duì)象

var storage = window.localStorage; var person = {name:'xiecanyong',sex:'man',hobby:'program' };var data = JSON.stringify(person); storage.setItem("user",data);var jsons=storage.getItem("data"); var jsonObj=JSON.parse(jsons);

SessionStorage

Storage對(duì)象是一個(gè)持久化關(guān)聯(lián)數(shù)組，數(shù)組使用字符串來(lái)索引，存儲(chǔ)的值都是字符串形式的。LocalStorage和SessionStorage這兩個(gè)屬性都代表同一個(gè)Storage對(duì)象。

LocalStorage和SessionStorage的區(qū)別在于存儲(chǔ)的有效期和作用域的不同。

• LocalStorage存儲(chǔ)的數(shù)據(jù)是永久性的，除非主動(dòng)刪除，否則數(shù)據(jù)一直留在用戶的電腦中。
• LocalStorage的作用域是限定在文檔源（document origin）級(jí)別。同源的文檔間共享同樣的localStorage數(shù)據(jù)。
• SessionStorage用于臨時(shí)保存同一窗口(或標(biāo)簽頁(yè))的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)。
• SessionStorage的作用域同樣是限定在文檔源中，不過(guò)它被限定在窗口中。也就是說(shuō)，如果同源的文檔在不同的瀏覽器標(biāo)簽頁(yè)中，那它們互相之間擁有的是各自的SessionStorage數(shù)據(jù)，無(wú)法共享。如果一個(gè)瀏覽器標(biāo)簽頁(yè)包含多個(gè)元素，它們包含的文檔是同源的，兩者之間的SessionStorage是可共享的。

SessionStorage 的用法和 LocalStorage 完全一致，參照 LocalStorage 進(jìn)行使用即可。

參考文章

js基礎(chǔ)-客戶端存儲(chǔ)（Cookie、Storage、IndexedDB）

基于js 本地存儲(chǔ)(詳解)

W3School-JavaScript Cookies

前端開(kāi)發(fā)的客戶端本地存儲(chǔ)

Window localStorage 屬性

總結(jié)

以上是生活随笔為你收集整理的八、前端开发-JavaScript 客户端存储的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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