快捷導(dǎo)航

JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用

更新時(shí)間：2020年10月13日 15:58:44 作者：失憶癥患者1

這篇文章主要介紹了JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

javaScript有三種數(shù)據(jù)存儲(chǔ)方式，分別是：

sessionStorage
localStorage
cookier

1. sessionStorage

sessionStorage僅在當(dāng)前會(huì)話下有效，關(guān)閉頁面或?yàn)g覽器后被清除；
setItem(key,value) 設(shè)置數(shù)據(jù)
getItem(key) 獲取數(shù)據(jù)
removeItem(key) 移除數(shù)據(jù)
clear() 清除所有值

<script>
  // 添加數(shù)據(jù)
  window.sessionStorage.setItem("name","李四")
  window.sessionStorage.setItem("age",18)
  // 獲取數(shù)據(jù)
  console.log(window.sessionStorage.getItem("name")) // 李四
  // 清除某個(gè)數(shù)據(jù)
  window.sessionStorage.removeItem("gender")
  // 清空所有數(shù)據(jù)
  window.sessionStorage.clear()
</script>

2. localStorage

localStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù)，用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，直到手動(dòng)去刪除；
localStorage和sessionStorage最大一般為5MB，僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信；
setItem(key,value) 設(shè)置數(shù)據(jù)
getItem(key) 獲取數(shù)據(jù)
removeItem(key) 移除數(shù)據(jù)
clear() 清除所有值

<script>
  // 添加數(shù)據(jù)
  window.localStorage.setItem("name","張三")
  window.localStorage.setItem("age",20)
  window.localStorage.setItem("gender","男")
  // 獲取數(shù)據(jù)
  console.log(window.localStorage.getItem("name")) // 張三
  // 清除某個(gè)數(shù)據(jù)
  window.localStorage.removeItem("gender")
  // 清空所有數(shù)據(jù)
  window.localStorage.clear()
</script>

3. cookier

簡介
Cookie 是一些數(shù)據(jù), 存儲(chǔ)于你電腦上的文本文件中，用于存儲(chǔ) web 頁面的用戶信息
Cookie 數(shù)據(jù)是以鍵值對(duì)的形式存在的，每個(gè)鍵值對(duì)都有過期時(shí)間。如果不設(shè)置時(shí)間，瀏覽器關(guān)閉，cookie就會(huì)消失，當(dāng)然用戶也可以手動(dòng)清除cookie
Cookie每次都會(huì)攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會(huì)帶來性能問題
Cookie內(nèi)存大小受限，一般每個(gè)域名下是4K左右，每個(gè)域名大概能存儲(chǔ)50個(gè)鍵值對(duì)

基本操作
通過訪問document.cookie可以對(duì)cookie進(jìn)行創(chuàng)建，修改與獲取。
默認(rèn)情況下，cookie 在瀏覽器關(guān)閉時(shí)刪除，你還可以為 cookie的某個(gè)鍵值對(duì) 添加一個(gè)過期時(shí)間
如果設(shè)置新的cookie時(shí)，某個(gè)key已經(jīng)存在，則會(huì)更新這個(gè)key對(duì)應(yīng)的值，否則他們會(huì)同時(shí)存在cookie中

<script>
  // 設(shè)置cookie
  document.cookie = "username=orochiz"
  document.cookie = "age=20"
 
  // 讀取cookie
  var msg = document.cookie
  console.log(msg) // username=orochiz; age=20
 
  // 添加過期時(shí)間（單位：天）
  var d = new Date() // 當(dāng)前時(shí)間 2019-9-25
  var days = 3    // 3天
  d.setDate(d.getDate() + days)
  document.cookie = "username=orochiz;"+"expires="+d
 
  // 刪除cookie （給某個(gè)鍵值對(duì)設(shè)置過期的時(shí)間）
  d.setDate(d.getDate() - 1)
  console.log(document.cookie)
</script>

總結(jié)

相同點(diǎn)：都保存在瀏覽器端，可以下圖位置查看儲(chǔ)存的信息

不同點(diǎn)：

①傳遞方式不同

cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞。

sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

②數(shù)據(jù)大小不同

cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。
存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。

sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

③數(shù)據(jù)有效期不同

sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；

localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；

cookie只在設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。

④作用域不同

sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面；

localStorage 在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的。

Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。

Web Storage 的 api 接口使用更方便。

到此這篇關(guān)于JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用的文章就介紹到這了,更多相關(guān)JavaScript本地儲(chǔ)存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: