欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2020年10月13日 15:58:44   作者:失憶癥患者1  
這篇文章主要介紹了JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

  • sessionStorage
  • localStorage
  • cookier

1. sessionStorage

  • sessionStorage僅在當(dāng)前會(huì)話下有效,關(guān)閉頁(yè)面或?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ù),用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒(méi)有過(guò)期時(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

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

基本操作
 通過(guò)訪問(wèn)document.cookie可以對(duì)cookie進(jìn)行創(chuàng)建,修改與獲取。
 默認(rèn)情況下,cookie 在瀏覽器關(guān)閉時(shí)刪除,你還可以為 cookie的某個(gè)鍵值對(duì) 添加一個(gè)過(guò)期時(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
 
  // 添加過(guò)期時(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è)置過(guò)期的時(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ù)器間來(lái)回傳遞。

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

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

cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個(gè)路徑下。
 存儲(chǔ)大小限制也不同,cookie數(shù)據(jù)不能超過(guò)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過(guò)期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉。

④作用域不同

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

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js 分欄效果實(shí)現(xiàn)代碼

    js 分欄效果實(shí)現(xiàn)代碼

    原創(chuàng)JS分欄效果,面向?qū)ο螅?使用簡(jiǎn)單。
    2009-08-08
  • JavaScript自定義超時(shí)API代碼實(shí)例

    JavaScript自定義超時(shí)API代碼實(shí)例

    這篇文章主要介紹了JavaScript自定義超時(shí)API代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-04-04
  • Flutter自適用高度PageView的實(shí)現(xiàn)方案

    Flutter自適用高度PageView的實(shí)現(xiàn)方案

    在?Flutter?中,PageView?是一個(gè)非常常用的組件,能夠?qū)崿F(xiàn)多個(gè)頁(yè)面的滑動(dòng)切換,這篇文章主要介紹了Flutter-自適用高度PageView,需要的朋友可以參考下
    2024-08-08
  • 用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能

    用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能

    這篇文章主要介紹了用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧
    2017-07-07
  • 微信小程序?qū)崿F(xiàn)多張圖片上傳功能

    微信小程序?qū)崿F(xiàn)多張圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多張圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 原生javascript實(shí)現(xiàn)圖片輪播切換效果

    原生javascript實(shí)現(xiàn)圖片輪播切換效果

    這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)圖片輪播切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 小程序?qū)崿F(xiàn)上下切換位置

    小程序?qū)崿F(xiàn)上下切換位置

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上下切換位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • Three.js?中的屏幕空間環(huán)境光遮蔽SSAO

    Three.js?中的屏幕空間環(huán)境光遮蔽SSAO

    這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • 微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能示例

    微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能,結(jié)合實(shí)例形式分析了微信小程序wx.setClipboardData接口實(shí)現(xiàn)操作粘貼板進(jìn)行復(fù)制操作的相關(guān)使用技巧,需要的朋友可以參考下
    2019-04-04
  • 幾種設(shè)置表單元素中文本輸入框不可編輯的方法總結(jié)

    幾種設(shè)置表單元素中文本輸入框不可編輯的方法總結(jié)

    這篇文章主要是對(duì)幾種設(shè)置表單元素中文本輸入框不可編輯的方法進(jìn)行了總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2013-11-11

最新評(píng)論