前端本地存儲的 3 種方法 cookie、local

前端本地存儲的 3 種方法 cookie、localStorage、sessionStorage

ookie

如何工作

當(dāng)網(wǎng)頁要發(fā)http請求時(shí)，瀏覽器會先檢查是否有相應(yīng)的cookie，有則自動(dòng)添加在request header中的cookie字段中。這些是瀏覽器自動(dòng)幫我們做的，而且每一次http請求瀏覽器都會自動(dòng)幫我們做。這個(gè)特點(diǎn)很重要，因?yàn)檫@關(guān)系到“什么樣的數(shù)據(jù)適合存儲在cookie中”。

存儲在cookie中的數(shù)據(jù)，每次都會被瀏覽器自動(dòng)放在http請求中，如果這些數(shù)據(jù)并不是每個(gè)請求都需要發(fā)給服務(wù)端的數(shù)據(jù)，瀏覽器這設(shè)置自動(dòng)處理無疑增加了網(wǎng)絡(luò)開銷；但如果這些數(shù)據(jù)是每個(gè)請求都需要發(fā)給服務(wù)端的數(shù)據(jù)（比如身份認(rèn)證信息），瀏覽器這設(shè)置自動(dòng)處理就大大免去了重復(fù)添加操作。所以對于那種設(shè)置“每次請求都要攜帶的信息（最典型的就是身份認(rèn)證信息）”就特別適合放在cookie中，其他類型的數(shù)據(jù)就不適合了。

特征

不同的瀏覽器存放的cookie位置不一樣，也是不能通用的。

cookie的存儲是以域名形式進(jìn)行區(qū)分的，不同的域下存儲的cookie是獨(dú)立的。

我們可以設(shè)置cookie生效的域（當(dāng)前設(shè)置cookie所在域的子域），也就是說，我們能夠操作的cookie是當(dāng)前域以及當(dāng)前域下的所有子域

一個(gè)域名下存放的cookie的個(gè)數(shù)是有限制的，不同的瀏覽器存放的個(gè)數(shù)不一樣,一般為20個(gè)。

每個(gè)cookie存放的內(nèi)容大小也是有限制的，不同的瀏覽器存放大小不一樣，一般為4KB。

cookie也可以設(shè)置過期的時(shí)間，默認(rèn)是會話結(jié)束的時(shí)候，當(dāng)時(shí)間到期自動(dòng)銷毀

cookie值既可以設(shè)置，也可以讀取。

cookie 操作

設(shè)置

// 客戶端設(shè)置，注意一次只能設(shè)置一個(gè)

document.cookie='名字=值';
document.cookie='username=cfangxu;domain=baike.baidu.com'    并且設(shè)置了生效域

// 注意： 客戶端可以設(shè)置cookie 的下列選項(xiàng)：expires、domain、path、secure 

// 服務(wù)器端設(shè)置 不管你是請求一個(gè)資源文件（如 html/js/css/圖片），還是發(fā)送一個(gè)ajax請求，服務(wù)端都會返回response。
// 而response header中有一項(xiàng)叫set-cookie，是服務(wù)端專門用來設(shè)置cookie的。
// Set-Cookie 消息頭是一個(gè)字符串，其格式如下（中括號中的部分是可選的）：

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

// 注意： 一個(gè)set-Cookie字段只能設(shè)置一個(gè)cookie，當(dāng)你要想設(shè)置多個(gè) cookie，需要添加同樣多的set-Cookie字段。 服務(wù)端可以設(shè)置cookie 的所有選項(xiàng)：expires、domain、path、secure、HttpOnly

讀取

我們通過document.cookie來獲取當(dāng)前網(wǎng)站下的cookie的時(shí)候，得到的字符串形式的值，它包含了當(dāng)前網(wǎng)站下所有的cookie（為避免跨域腳本(xss)攻擊，這個(gè)方法只能獲取非 HttpOnly 類型的cookie）。它會把所有的cookie通過一個(gè)分號+空格的形式串聯(lián)起來，例如username=chenfangxu; job=coding

修改 cookie

要想修改一個(gè)cookie，只需要重新賦值就行，舊的值會被新的值覆蓋。但要注意一點(diǎn)，在設(shè)置新cookie時(shí)，path/domain這幾個(gè)選項(xiàng)一定要舊cookie 保持一樣。否則不會修改舊值，而是添加了一個(gè)新的 cookie。

刪除

把要?jiǎng)h除的cookie的過期時(shí)間設(shè)置成已過去的時(shí)間,path/domain/這幾個(gè)選項(xiàng)一定要舊cookie 保持一樣。

document.cookie='uid=dkfywqkrh3;expires=' + new Date(0) + ';path=/;secure;

cookie的屬性（可選項(xiàng)）

過期時(shí)間

如果我們想長時(shí)間存放一個(gè)cookie。需要在設(shè)置這個(gè)cookie的時(shí)候同時(shí)給他設(shè)置一個(gè)過期的時(shí)間。如果不設(shè)置，cookie默認(rèn)是臨時(shí)存儲的，當(dāng)瀏覽器關(guān)閉進(jìn)程的時(shí)候自動(dòng)銷毀

// document.cookie='名稱=值;expires=' + GMT(格林威治時(shí)間)格式的日期型字符串; 
// 一般設(shè)置天數(shù)：new Date().setDate( oDate.getDate() + 5 ); 比當(dāng)前時(shí)間多5天 

// 一個(gè)設(shè)置cookie時(shí)效性的例子
function setCookie(c_name, value, expiredays){
      var exdate=new Date();
      exdate.setDate(exdate.getDate() + expiredays);
      document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

使用方法：setCookie('username','cfangxu',30)

cookie的域概念（domain選項(xiàng)）

domain指定了 cookie 將要被發(fā)送至哪個(gè)或哪些域中。默認(rèn)情況下，domain 會被設(shè)置為創(chuàng)建該 cookie 的頁面所在的域名，所以當(dāng)給相同域名發(fā)送請求時(shí)該 cookie 會被發(fā)送至服務(wù)器。

瀏覽器會把 domain 的值與請求的域名做一個(gè)尾部比較（即從字符串的尾部開始比較），并將匹配的 cookie 發(fā)送至服務(wù)器。

// 客戶端設(shè)置

document.cookie="username=cfangxu;path=/;domain=qq.com" 

//如上：“www.qq.com" 與 "sports.qq.com" 公用一個(gè)關(guān)聯(lián)的域名"qq.com"，我們?nèi)绻胱?"sports.qq.com" 下的cookie被 "www.qq.com" 訪問，我們就需要用到 cookie 的domain屬性，并且需要把path屬性設(shè)置為 "/"。

// 服務(wù)端設(shè)置

Set-Cookie: username=cfangxu;path=/;domain=qq.com 

// 注：一定的是同域之間的訪問，不能把domain的值設(shè)置成非主域的域名。

cookie的路徑概念（path選項(xiàng)）

cookie 一般都是由于用戶訪問頁面而被創(chuàng)建的，可是并不是只有在創(chuàng)建 cookie 的頁面才可以訪問這個(gè) cookie。因?yàn)榘踩矫娴目紤],默認(rèn)情況下，只有與創(chuàng)建 cookie 的頁面在同一個(gè)目錄或子目錄下的網(wǎng)頁才可以訪問。即path屬性可以為服務(wù)器特定文檔指定cookie，這個(gè)屬性設(shè)置的url且?guī)в羞@個(gè)前綴的url路徑都是有效的。

// 客戶端設(shè)置
// 最常用的例子就是讓 cookie 在根目錄下,這樣不管是哪個(gè)子頁面創(chuàng)建的 cookie，所有的頁面都可以訪問到了。 

document.cookie="username=cfangxu; path=/"

// 服務(wù)端設(shè)置

Set-Cookie:name=cfangxu; path=/blog 

//如上設(shè)置：path 選項(xiàng)值會與 /blog，/blogrool 等等相匹配；任何以 /blog 開頭的選項(xiàng)都是合法的。需要注意的是，只有在 domain 選項(xiàng)核實(shí)完畢之后才會對 path 屬性進(jìn)行比較。path 屬性的默認(rèn)值是發(fā)送 Set-Cookie 消息頭所對應(yīng)的 URL 中的 path 部分。

domain和path總結(jié)：

domain是域名，path是路徑，兩者加起來就構(gòu)成了 URL，domain和path一起來限制 cookie 能被哪些 URL 訪問。所以domain和path兩個(gè)個(gè)選項(xiàng)共同決定了cookie何時(shí)被瀏覽器自動(dòng)添加到請求頭部中發(fā)送出去。如果沒有設(shè)置這兩個(gè)選項(xiàng)，則會使用默認(rèn)值。domain的默認(rèn)值為設(shè)置該cookie的網(wǎng)頁所在的域名，path默認(rèn)值為設(shè)置該cookie的網(wǎng)頁所在的目錄。

cookie的安全性（secure選項(xiàng)）

通常 cookie 信息都是使用HTTP連接傳遞數(shù)據(jù)，這種傳遞方式很容易被查看，所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內(nèi)容比較重要，那么就要求使用加密的數(shù)據(jù)傳輸。

secure選項(xiàng)用來設(shè)置cookie只在確保安全的請求中才會發(fā)送。當(dāng)請求是HTTPS或者其他安全協(xié)議時(shí)，包含 secure 選項(xiàng)的 cookie 才能被發(fā)送至服務(wù)器。

document.cookie="username=cfangxu; secure"

把cookie設(shè)置為secure，只保證 cookie 與服務(wù)器之間的數(shù)據(jù)傳輸過程加密，而保存在本地的 cookie文件并不加密。就算設(shè)置了secure 屬性也并不代表他人不能看到你機(jī)器本地保存的 cookie 信息。機(jī)密且敏感的信息絕不應(yīng)該在 cookie 中存儲或傳輸，因?yàn)?cookie 的整個(gè)機(jī)制原本都是不安全的

注意：如果想在客戶端即網(wǎng)頁中通過 js 去設(shè)置secure類型的 cookie，必須保證網(wǎng)頁是https協(xié)議的。在http協(xié)議的網(wǎng)頁中是無法設(shè)置secure類型cookie的。

httpOnly

這個(gè)選項(xiàng)用來設(shè)置cookie是否能通過 js 去訪問。默認(rèn)情況下，cookie不會帶httpOnly選項(xiàng)(即為空)，所以默認(rèn)情況下，客戶端是可以通過js代碼去訪問（包括讀取、修改、刪除等）這個(gè)cookie的。

當(dāng)cookie帶httpOnly選項(xiàng)時(shí)，客戶端則無法通過js代碼去訪問（包括讀取、修改、刪除等）這個(gè)cookie。在客戶端是不能通過js代碼去設(shè)置一個(gè)httpOnly類型的cookie的，這種類型的cookie只能通過服務(wù)端來設(shè)置。

localStorage

HTML5新方法，不過IE8及以上瀏覽器都兼容。

特點(diǎn)

生命周期：持久化的本地存儲，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。

存儲的信息在同一域中是共享的。

當(dāng)本頁操作（新增、修改、刪除）了localStorage的時(shí)候，本頁面不會觸發(fā)storage事件,但是別的頁面會觸發(fā)storage事件。

大小：據(jù)說是5M（跟瀏覽器廠商有關(guān)系）

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

localStorage受同源策略的限制

操作方法

// 獲取當(dāng)前storage中的元素?cái)?shù)目
localStorage.Length();

// 設(shè)置
localStorage.setItem('name','muou');

// 獲取
localStorage.getItem('name');

//也可以獲取鍵名 , 獲取第一個(gè)鍵名
localStorage.key(0);

//刪除
localStorage.remove('name');

//也可以一次性清除所有存儲 
localStorage.clear();

storage事件

當(dāng)storage發(fā)生改變的時(shí)候觸發(fā)。當(dāng)頁面對storage的操作會觸發(fā)其他頁面的storage事件，storage事件是可以跨頁面通訊的，在你對storage對象進(jìn)行任何操作的時(shí)候，都會觸發(fā)storage事件,事件里邊包括包括：

domain：發(fā)生變化的存儲空間的域名
key：設(shè)置或者刪除的鍵名
newValue：如果是設(shè)置值，則是新值；如果是刪除鍵，則是null
oldValue：鍵被更改之前的值

window.addEventListener('storage', e=>{
    console.log(e.domain)
})

storage事件使用參考

對于sessionStorage和localStorage上的任何更改都會觸發(fā)storage事件，但storage事件不會區(qū)分這兩者;

sessionStorage

其實(shí)跟localStorage差不多，也是本地存儲，會話本地存儲

操作方法

和 localStorage 的API完全相同

// 獲取當(dāng)前storage中的元素?cái)?shù)目
localStorage.Length();

sessionStorage.setItem('key','value')  // 存儲數(shù)據(jù)

sessionStorage.getItem('key')    // 讀取數(shù)據(jù)

sessionStorage.remove('key')    // 刪除數(shù)據(jù)

sessionStorage.clear()    // 清空

特點(diǎn)：

用于本地存儲一個(gè)會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一頁面，數(shù)據(jù)仍然存在。關(guān)閉標(biāo)簽頁后，sessionStorage即被銷毀，或者在新的標(biāo)簽頁打開同源的另一個(gè)頁面，sessionStorage也是沒有的。

應(yīng)用的場景有，比如說我們都知道，在頁面刷新的時(shí)候，我們寫的js里邊的變量函數(shù)等等的，內(nèi)存會被釋放掉，那么這個(gè)時(shí)候可以用sessionStorage來存儲一些不想被釋放掉內(nèi)存的數(shù)據(jù)，比如說記錄一個(gè)滾動(dòng)條的位置，或者播放器的進(jìn)度等等

cookie、localStorage、sessionStorage區(qū)別

相同：

在本地（瀏覽器端）存儲數(shù)據(jù)

不同：

sessionStorage和localStorage 都受到同源策略限制，就是跨域問題，在訪問sessionStorage和localStorage 的時(shí)候，頁面必須在同一個(gè)域名，使用同一個(gè)協(xié)議，并且一個(gè)端口

sessionStorage比localStorage更嚴(yán)苛一點(diǎn)，除了協(xié)議、主機(jī)名、端口外，還要求在同一窗口（也就是瀏覽器的標(biāo)簽頁）下。

localStorage是永久存儲，除非手動(dòng)刪除。

sessionStorage當(dāng)會話結(jié)束（當(dāng)前頁面、標(biāo)簽頁關(guān)閉的時(shí)候，自動(dòng)銷毀）

cookie的數(shù)據(jù)會在每一次發(fā)送http請求的時(shí)候，同時(shí)發(fā)送給服務(wù)器而localStorage、sessionStorage不會。

sessionStorage和localStorage 也有大小限制，相比cookie大了很多，是5M

sessionStorage和localStorage只能通過客戶端操作，cookie既可以通過客戶端操作又可以通過服務(wù)端操作

分享成果，隨喜正能量】我們畢生的任務(wù)就是做一個(gè)優(yōu)秀的普通人。這個(gè)優(yōu)秀的普通人，熱愛世界，熱愛萬物，熱愛眾生，然后踏踏實(shí)實(shí)地去尋找到一個(gè)自己內(nèi)心喜歡又有時(shí)代價(jià)值的事情。一個(gè)人一輩子能夠做好一兩件事就很好了。。

我給VBA的定義：VBA是個(gè)人小型自動(dòng)化處理的有效工具。利用好了，可以大大提高自己的勞動(dòng)效率，而且可以提高數(shù)據(jù)的準(zhǔn)確度。我推出的VBA系列教程共十套(本文的最后附有VBA教程目錄和VBA工具目錄)，現(xiàn)在已經(jīng)全部完成。

如果您VBA是入門階段，可以打包選擇7.1.3.9教程，第7套教程是入門，第1套教程是入門后的提高，第3套教程字典是必備的VBA之精華，第9套教程是實(shí)用的典型案例講解。如果您有了一定的VBA基礎(chǔ)可以根據(jù)自己的需要，進(jìn)行教程的選擇。教程提供的程序源碼文件就如一座大型的代碼庫支持著大家的工作。同時(shí)還有實(shí)用的資料送給學(xué)員。

VBA是面向?qū)ο缶幊痰恼Z言，博大精深。很多朋友咨詢英語和VBA的關(guān)系，這套《VBA即用型代碼手冊（漢英）》集合了眾多的案例，案例我用漢語和英語同時(shí)發(fā)布，學(xué)員從中可以更好的領(lǐng)會和掌握VBA中用到的一些英語。今日的內(nèi)容：WORD_VBA文本框的添加、刪除、寫入及保存為html文件

第六章 Word對象及示例

Word Objects and Macro Examples

7 文本框的添加、刪除、寫入 TextBox: Add, Delete, Write

Sub mynzAddTextBox()

ActiveDocument.Shapes.AddTextBox Orientation:=msoTextOrientationHorizontal, _

Left:=100, Top:=180, Width:=300, Height:=100

End Sub

Sub mynzDeleteTextBox()

'我們需要檢查 oShape 是否屬于 msoShapeRectangle 類型，并且它的文本框是否包含書寫位置

Dim oShape As Shape

If ActiveDocument.Shapes.Count > 0 Then

For Each oShape In ActiveDocument.Shapes

If oShape.AutoShapeType=msoShapeRectangle Then

If oShape.TextFrame.HasText=True Then

oShape.Delete

End If

Next oShape

End If

End Sub

Sub mynzWriteInTextBox()

Dim oShape As Shape

If ActiveDocument.Shapes.Count > 0 Then

For Each oShape In ActiveDocument.Shapes

If oShape.AutoShapeType=msoShapeRectangle Then

If oShape.TextFrame.HasText=True Then

oShape.TextFrame.TextRange.InsertAfter "VBA Case"

Exit For

End If

Next oShape

End If

End Sub

8 另存為html文件SaveAs .Html File

Sub mynzSaveMewithDateName()

'將當(dāng)前活動(dòng)文檔保存為過濾后的 html，并以當(dāng)前時(shí)間命名

Dim strTime As String

strTime=Format(Now, "hh-mm")

ActiveDocument.SaveAs FileName:=ActiveDocument.Path & "\" & strTime, FileFormat:=wdFormatFilteredHTML

End Sub

【分享成果，隨喜正能量】我20多年的VBA實(shí)踐經(jīng)驗(yàn)，全部濃縮在下面的各個(gè)教程中：

【分享成果，隨喜正能量】總有一段時(shí)光，讓我們深感痛苦，但不是所有的時(shí)光都這樣，我們要學(xué)會在黑暗中，找到一絲光芒，這束光來自于內(nèi)心，它會讓我們重新找到好日子。。

ocalStorage

<h2>localStorage</h2>
		<button onclick="saveData()">點(diǎn)我保存一個(gè)數(shù)據(jù)</button>
		<button onclick="readData()">點(diǎn)我讀取一個(gè)數(shù)據(jù)</button>
		<button onclick="deleteData()">點(diǎn)我刪除一個(gè)數(shù)據(jù)</button>
		<button onclick="deleteAllData()">點(diǎn)我清空一個(gè)數(shù)據(jù)</button>

		<script type="text/javascript" >
			let p={name:'張三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}

			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result=localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}

			function deleteData(){
				localStorage.removeItem('msg2')
			}

			function deleteAllData(){
				localStorage.clear()
			}
		</script>

sessionStorage

<h2>sessionStorage</h2>
		<button onclick="saveData()">點(diǎn)我保存一個(gè)數(shù)據(jù)</button>
		<button onclick="readData()">點(diǎn)我讀取一個(gè)數(shù)據(jù)</button>
		<button onclick="deleteData()">點(diǎn)我刪除一個(gè)數(shù)據(jù)</button>
		<button onclick="deleteAllData()">點(diǎn)我清空一個(gè)數(shù)據(jù)</button>

		<script type="text/javascript" >
			let p={name:'張三',age:18}

			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result=sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>

WebStorage 倉儲的都是字符串，要存對象需要JSON.stringify(p)在倉儲

1. 存儲內(nèi)容大小一般支持5MB左右（不同瀏覽器可能還不一樣）

2. 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實(shí)現(xiàn)本地存儲機(jī)制。

3. 相關(guān)API：

1. xxxxxStorage.setItem('key', 'value');

該方法接受一個(gè)鍵和值作為參數(shù)，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應(yīng)的值。

2. xxxxxStorage.getItem('person');

該方法接受一個(gè)鍵名作為參數(shù)，返回鍵名對應(yīng)的值。

3. xxxxxStorage.removeItem('key');

? 該方法接受一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲中刪除。

4. xxxxxStorage.clear()

? 該方法會清空存儲中的所有數(shù)據(jù)。

4. 備注：

1. SessionStorage存儲的內(nèi)容會隨著瀏覽器窗口關(guān)閉而消失。

2. LocalStorage存儲的內(nèi)容，需要手動(dòng)清除才會消失。

3. xxxxxStorage.getItem(xxx)如果xxx對應(yīng)的value獲取不到，那么getItem的返回值是null。

4. JSON.parse(null)的結(jié)果依然是null。

代碼摘錄于尚硅谷Vue學(xué)習(xí)課件

在線咨詢

上一篇：聊聊JS模塊化發(fā)展歷程
下一篇：JavaScript 生成日歷中任意一個(gè)月的日期數(shù)組

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端本地存儲的 3 種方法 cookie、local

ookie

如何工作

特征

cookie 操作

設(shè)置

讀取

修改 cookie

刪除

cookie的屬性（可選項(xiàng)）

過期時(shí)間

cookie的域概念（domain選項(xiàng)）

cookie的路徑概念（path選項(xiàng)）

domain和path總結(jié)：

cookie的安全性（secure選項(xiàng)）

httpOnly

localStorage

特點(diǎn)

操作方法

storage事件

sessionStorage

操作方法

特點(diǎn)：

cookie、localStorage、sessionStorage區(qū)別

相同：

不同：

第六章 Word對象及示例

7 文本框的添加、刪除、寫入 TextBox: Add, Delete, Write

8 另存為html文件SaveAs .Html File

ocalStorage

sessionStorage

您的項(xiàng)目需求