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

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

ookie

如何工作

當網頁要發http請求時，瀏覽器會先檢查是否有相應的cookie，有則自動添加在request header中的cookie字段中。這些是瀏覽器自動幫我們做的，而且每一次http請求瀏覽器都會自動幫我們做。這個特點很重要，因為這關系到“什么樣的數據適合存儲在cookie中”。

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

特征

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

cookie的存儲是以域名形式進行區分的，不同的域下存儲的cookie是獨立的。

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

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

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

cookie也可以設置過期的時間，默認是會話結束的時候，當時間到期自動銷毀

cookie值既可以設置，也可以讀取。

cookie 操作

設置

// 客戶端設置，注意一次只能設置一個

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

// 注意： 客戶端可以設置cookie 的下列選項：expires、domain、path、secure 

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

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

// 注意： 一個set-Cookie字段只能設置一個cookie，當你要想設置多個 cookie，需要添加同樣多的set-Cookie字段。 服務端可以設置cookie 的所有選項：expires、domain、path、secure、HttpOnly

讀取

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

修改 cookie

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

刪除

把要刪除的cookie的過期時間設置成已過去的時間,path/domain/這幾個選項一定要舊cookie 保持一樣。

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

cookie的屬性（可選項）

過期時間

如果我們想長時間存放一個cookie。需要在設置這個cookie的時候同時給他設置一個過期的時間。如果不設置，cookie默認是臨時存儲的，當瀏覽器關閉進程的時候自動銷毀

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

// 一個設置cookie時效性的例子
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選項）

domain指定了 cookie 將要被發送至哪個或哪些域中。默認情況下，domain 會被設置為創建該 cookie 的頁面所在的域名，所以當給相同域名發送請求時該 cookie 會被發送至服務器。

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

// 客戶端設置

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

//如上：“www.qq.com" 與 "sports.qq.com" 公用一個關聯的域名"qq.com"，我們如果想讓 "sports.qq.com" 下的cookie被 "www.qq.com" 訪問，我們就需要用到 cookie 的domain屬性，并且需要把path屬性設置為 "/"。

// 服務端設置

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

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

cookie的路徑概念（path選項）

cookie 一般都是由于用戶訪問頁面而被創建的，可是并不是只有在創建 cookie 的頁面才可以訪問這個 cookie。因為安全方面的考慮,默認情況下，只有與創建 cookie 的頁面在同一個目錄或子目錄下的網頁才可以訪問。即path屬性可以為服務器特定文檔指定cookie，這個屬性設置的url且帶有這個前綴的url路徑都是有效的。

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

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

// 服務端設置

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

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

domain和path總結：

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

cookie的安全性（secure選項）

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

secure選項用來設置cookie只在確保安全的請求中才會發送。當請求是HTTPS或者其他安全協議時，包含 secure 選項的 cookie 才能被發送至服務器。

document.cookie="username=cfangxu; secure"

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

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

httpOnly

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

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

localStorage

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

特點

生命周期：持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

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

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

大小：據說是5M（跟瀏覽器廠商有關系）

localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡

localStorage受同源策略的限制

操作方法

// 獲取當前storage中的元素數目
localStorage.Length();

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

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

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

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

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

storage事件

當storage發生改變的時候觸發。當頁面對storage的操作會觸發其他頁面的storage事件，storage事件是可以跨頁面通訊的，在你對storage對象進行任何操作的時候，都會觸發storage事件,事件里邊包括包括：

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

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

storage事件使用參考

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

sessionStorage

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

操作方法

和 localStorage 的API完全相同

// 獲取當前storage中的元素數目
localStorage.Length();

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

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

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

sessionStorage.clear()    // 清空

特點：

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

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

cookie、localStorage、sessionStorage區別

相同：

在本地（瀏覽器端）存儲數據

不同：

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

sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標簽頁）下。

localStorage是永久存儲，除非手動刪除。

sessionStorage當會話結束（當前頁面、標簽頁關閉的時候，自動銷毀）

cookie的數據會在每一次發送http請求的時候，同時發送給服務器而localStorage、sessionStorage不會。

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

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

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

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

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

VBA是面向對象編程的語言，博大精深。很多朋友咨詢英語和VBA的關系，這套《VBA即用型代碼手冊（漢英）》集合了眾多的案例，案例我用漢語和英語同時發布，學員從中可以更好的領會和掌握VBA中用到的一些英語。今日的內容：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()

'將當前活動文檔保存為過濾后的 html，并以當前時間命名

Dim strTime As String

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

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

End Sub

【分享成果，隨喜正能量】我20多年的VBA實踐經驗，全部濃縮在下面的各個教程中：

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

ocalStorage

<h2>localStorage</h2>
		<button onclick="saveData()">點我保存一個數據</button>
		<button onclick="readData()">點我讀取一個數據</button>
		<button onclick="deleteData()">點我刪除一個數據</button>
		<button onclick="deleteAllData()">點我清空一個數據</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()">點我保存一個數據</button>
		<button onclick="readData()">點我讀取一個數據</button>
		<button onclick="deleteData()">點我刪除一個數據</button>
		<button onclick="deleteAllData()">點我清空一個數據</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. 存儲內容大小一般支持5MB左右（不同瀏覽器可能還不一樣）

2. 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地存儲機制。

3. 相關API：

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

該方法接受一個鍵和值作為參數，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。

2. xxxxxStorage.getItem('person');

該方法接受一個鍵名作為參數，返回鍵名對應的值。

3. xxxxxStorage.removeItem('key');

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

4. xxxxxStorage.clear()

? 該方法會清空存儲中的所有數據。

4. 備注：

1. SessionStorage存儲的內容會隨著瀏覽器窗口關閉而消失。

2. LocalStorage存儲的內容，需要手動清除才會消失。

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

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

代碼摘錄于尚硅谷Vue學習課件

在線咨詢

上一篇：聊聊JS模塊化發展歷程
下一篇：JavaScript 生成日歷中任意一個月的日期數組

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

ookie

如何工作

特征

cookie 操作

設置

讀取

修改 cookie

刪除

cookie的屬性（可選項）

過期時間

cookie的域概念（domain選項）

cookie的路徑概念（path選項）

domain和path總結：

cookie的安全性（secure選項）

httpOnly

localStorage

特點

操作方法

storage事件

sessionStorage

操作方法

特點：

cookie、localStorage、sessionStorage區別

相同：

不同：

第六章 Word對象及示例

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

8 另存為html文件SaveAs .Html File

ocalStorage

sessionStorage

您的項目需求