国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

詳說 Cookie, LocalStorage 與 SessionStorage

endless_road / 406人閱讀

摘要：顧名思義，確實非常小，它的大小限制為左右，是網景公司的前雇員在年月的發明。是標準中新加入的技術，它并不是什么劃時代的新東西。特性與的接口類似，但保存數據的生命周期與不同。但當頁面關閉后，中的數據就會被清空。

  
本文最初發布于我的個人博客：咀嚼之味

最近在找暑期實習，其中百度、網易游戲、阿里的面試都問到一些關于HTML5的東西，問題大多是這樣開頭的：“你用過什么HTML5的技術呀？” 而后，每次都能扯到 Cookie 和 localStorage 有啥差別。這篇文章就旨在詳細地闡述這部分內容，而具體 Web Storage API 的使用可以參考MDN的文檔，就不在這篇文章中贅述了。

基本概念 Cookie

Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右，是網景公司的前雇員 Lou Montulli 在1993年3月的發明。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

localStorage

localStorage 是 HTML5 標準中新加入的技術，它并不是什么劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用于本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支持，如果你的網站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
sessionStorage

sessionStorage 與 localStorage 的接口類似，但保存數據的生命周期與 localStorage 不同。做過后端開發的同學應該知道 Session 這個詞的意思，直譯過來是“會話”。而 sessionStorage 是一個前端的概念，它只是可以將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉后，sessionStorage 中的數據就會被清空。

三者的異同
特性 Cookie localStorage sessionStorage
數據的生命期 可設置失效時間，默認是關閉瀏覽器后失效 除非被清除，否則永久保存 僅在當前會話下有效，關閉頁面或瀏覽器后被清除
存放數據大小 4K左右 一般為5MB 一般為5MB
與服務器端通信 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信
易用性 需要程序員自己封裝，源生的Cookie接口不友好 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持
應用場景

有了對上面這些差別的直觀理解，我們就可以討論三者的應用場景了。

因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~

而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5游戲通常會產生一些本地數據，localStorage 也是非常適用的。如果遇到一些內容特別多的表單，為了優化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然后按步驟引導用戶填寫。這時候 sessionStorage 的作用就發揮出來了。

安全性的考慮

需要注意的是，不是什么數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。因為只要打開控制臺，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。

參考資料

what is the difference between localStorage, sessionStorage, session and cookie?

HTML5 localStorage security

維基百科 - Cookie

Web Storage API

瀏覽器本地數據（sessionStorage、localStorage、cookie）與server端數據

HTMl5的sessionStorage和localStorage

HTML5 LocalStorage 本地存儲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85674.html

相關文章

  • 深入了解瀏覽器存儲--從cookie到WebStorage、IndexedDB

    摘要：優異的性能表現，有一部分原因要歸功于瀏覽器存儲技術的提升。是服務端生成，客戶端進行維護和存儲。當超過時，它將面臨被裁切的命運。此外很多瀏覽器對一個站點的個數也是有限制的。存入讀取數據保存的數據，以鍵值對的形式存在。 前言 隨著移動網絡的發展與演化，我們手機上現在除了有原生 App，還能跑WebApp——它即開即用，用完即走。一個優秀的 WebApp 甚至可以擁有和原生 App 媲美的功...

    XGBCCC 評論0 收藏0

  • [聊一聊系列]聊一聊前端存儲那些事兒

    摘要：如圖圖顧名思義，，是級別的存儲。如筆者寫的一篇淺析文章聊一聊百度移動端首頁前端速度那些事兒讀者們可以嘗試使用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開發越來越復雜的今天，前端擁有的能力也越來越多。其中最重要的一項莫過于web存儲。...

    caige 評論0 收藏0

  • Javascript本地存儲小結

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

    garfileo 評論0 收藏0

  • localStorage、sessionStorage、Cookie的區別及用法

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

    sf_wangchong 評論0 收藏0

發表評論

0條評論

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