成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

cookie、session、sessionStorage、localStorage 之間的區(qū)別及應(yīng)

nidaye / 1668人閱讀

摘要：獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的值。刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。存儲文件夾用戶名用戶名瀏覽器窗口關(guān)閉后數(shù)據(jù)被銷毀。存儲量小安全性差數(shù)據(jù)操作接口不友好，而存儲量較大安全性較高數(shù)據(jù)接口友好。

在前端日常開發(fā)中 cookie、webStorage 是我們常用的瀏覽器緩存方式。但同時說起 cookie、session、sessionStorage 和 localStorage 是不是有些傻傻分不清楚了？本文梳理概括了它們的區(qū)別及應(yīng)用場景，相信對你的面試和實(shí)際應(yīng)用都有一定幫助。

cookie

由服務(wù)端生成，保存在客戶端（由于前后端有交互，所以安全性差，且浪費(fèi)帶寬）

存儲大小有限（最大 4kb )

存儲內(nèi)容只接受 String 類型

保存位置：

若未設(shè)置過期時間，則保存在 內(nèi)存 中，瀏覽器關(guān)閉后銷毀

若設(shè)置了過期時間，則保存在 系統(tǒng)硬盤 中，直到過期時間結(jié)束后才消失（即使關(guān)閉瀏覽器）

數(shù)據(jù)操作不方便，原生接口不友好，需要自己封裝

應(yīng)用場景

判斷用戶是否登陸過網(wǎng)站，以便下次登錄時能夠?qū)崿F(xiàn)自動登錄（或者記住密碼）

保存登錄時間、瀏覽次數(shù)等信息

設(shè)置了過期時間的cookie存在了哪里呢？
 Mac:  /Users/用戶名/Library/caches/Google/Chrome/Default/cache
 Windows:  C:Users用戶名AppDataLocalMicrosoftWindowsTemporary Internet Files
session

是后端關(guān)心的內(nèi)容，依賴于 cookie（sessionID 保存在cookie中）

保存在服務(wù)端

存儲大小無限制

支持任何類型的存儲內(nèi)容

保存位置：服務(wù)器內(nèi)存，若訪問較多會影響服務(wù)器性能

webStorage

webStorage 是 html5 提供的本地存儲方案，包括兩種方式：sessionStorage 和 localStorage。相比 cookie 這種傳統(tǒng)的客戶端存儲方式，webStorage 有許多優(yōu)點(diǎn)：

保存在客戶端，不與服務(wù)器通信，因此比 cookie 更安全、速度更快

存儲空間有限，但比 cookie 大（5MB)

僅支持 String 類型的存儲內(nèi)容（和 cookie 一樣）

html5 提供了原生接口，數(shù)據(jù)操作比 cookie 方便

setItem(key, value) 保存數(shù)據(jù)，以鍵值對的方式儲存信息。

getItem(key) 獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值。

removeItem(key) 刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。

clear() 刪除所有的數(shù)據(jù)

key(index) 獲取某個索引的key

localStorage

持久化的本地存儲，瀏覽器關(guān)閉重新打開數(shù)據(jù)依然存在（除非手動刪除數(shù)據(jù)）。

應(yīng)用場景：長期登錄、判斷用戶是否已登錄，適合長期保存在本地的數(shù)據(jù)。

存儲文件夾：
 Mac:  /Users/用戶名/Library/Application Support/Google/Chrome/Default/Local Stroage
 Windows:  C:Users用戶名AppDataLocalGoogleChromeUser DataProfileLocal Storage
sessionStorage

瀏覽器窗口關(guān)閉后數(shù)據(jù)被銷毀。

應(yīng)用場景：敏感賬號一次性登錄。

總結(jié)

綜上所述，我們可以知道，cookie 和 webStorage（ localStorage、sessionStorage ）是前端工程師關(guān)心的內(nèi)容，session 是后端關(guān)心的內(nèi)容。
cookie 存儲量小、安全性差、數(shù)據(jù)操作接口不友好，而 webStorage 存儲量較大、安全性較高、數(shù)據(jù)接口友好。
若要持久的存儲方式，推薦使用 localStorage
若要一次性會話的存儲，推薦使用 sessionStorage

看完有收獲嗎？喜歡請點(diǎn)贊支持哦~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96366.html

相關(guān)文章

  • Javascript本地存儲小結(jié)

    摘要：不是很安全，別人可以分析存放在本地的并進(jìn)行欺騙，考慮到安全應(yīng)當(dāng)使用。因此不是一種持久化的本地存儲，僅僅是會話級別的存儲。用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。 前言 總括：詳細(xì)講述Cookie,LocalStorge,SesstionStorge的區(qū)別和用法。 人生如畫，歲月如歌。 原文博客地址：Javascript本地存儲小結(jié) 知乎專欄&&簡書專題：前端...

    garfileo 評論0 收藏0

  • Cookie&Session、LocalStorage&SessionStorage

    摘要：那要是被刪了呢那沒辦法了，只能重新登陸，意味著重新提交重新分配隨機(jī)數(shù)。它是一個哈希，作用就是字面意思，本地存儲，只不過這里的本地指的是瀏覽器。 標(biāo)簽可以保留回車和空格等你怎么寫它就怎么展示的內(nèi)容 cookie cookie可以看作是一種設(shè)置，允許瀏覽器在電腦本地硬盤的某一個隱蔽的地方開發(fā)一塊存儲空間，用來存放某些特定的內(nèi)容。 如果在服務(wù)器端設(shè)置了允許使用cookie，那么，之后瀏覽器每...

    twohappy 評論0 收藏0

  • 淺談cookie，session和localStorage，sessionStorage的區(qū)別

    摘要：保持狀態(tài)保存在瀏覽器端，保存在服務(wù)器端存儲的大小單個保存的數(shù)據(jù)不能超過大小沒有限制。的目的是克服由所帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。的生命周期是僅在當(dāng)前會話下有效。 寫在前面 既然是淺談，就不會詳細(xì)從底層原理解釋這幾個的區(qū)別，就簡單地聊一下，這幾個的區(qū)別，優(yōu)缺點(diǎn)，應(yīng)用場景 cookie和session 瀏覽器的緩存機(jī)制提供了可以將用戶數(shù)據(jù)存...

    frolc 評論0 收藏0

  • localStorage、sessionStorage、Cookie的區(qū)別及用法

    摘要：的區(qū)別及用法是本地存儲，存儲在客戶端，包括和。僅在當(dāng)前會話下有效，關(guān)閉頁面或?yàn)g覽器后被清除。源生接口可以接受，亦可再次封裝來對和有更好的支持。但需要程序員自己封裝，源生的接口不友好。每個最多只能有條，每個長度不能超過。 localStorage、sessionStorage、Cookie的區(qū)別及用法 showImg(https://segmentfault.com/img/bVYLlH...

    sf_wangchong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<