資訊專欄INFORMATION COLUMN
摘要：存儲之初探的發布和定稿為前端界帶來巨大的變化，新增的和特性給業務帶來了更多可能性，讓用戶體驗擁有了更可能的豐富。只讀返回一個整數，表示存儲在對象中的數據項數量。會在過期時間之后銷毀。安全性方面，中一般不建議存儲敏感信息。
Web存儲之LocalStorage初探
HTML5的發布和定稿為前端界帶來巨大的變化，新增的API和特性給業務帶來了更多可能性，讓用戶體驗擁有了更可能的豐富。
· HTML Geolocation 可以定位到用戶的地理位置
· HTML Drag and Drop 拖拽API，可以實現更簡單有效的交互方式
· HTML Local Storage 本地存儲方案， 配合離線緩存可以實現WebApp的本地化
· HTML Application Cache 離線緩存，可以將WebApp離線到本地使用
· HTML Web Workers JS版多線程，適合一些計算密集型的業務
· HTML SSE Server-sent Event 服務器推送技術，可以把主動權交給服務器端，往客戶端主動推送數據、消息
· HTML Canvas/WebGL HTML圖像處理API，能夠實現更絢爛和豐富的效果
· HTML Audio/Video HTML音視頻API，能夠更方便處理音視頻
今天，我就來簡單介紹一下LocalStorage 這個本地存儲。
首先來看一下 關于 Storage 的API。
Storage.length 只讀
返回一個整數，表示存儲在 Storage 對象中的數據項數量。
Storage.key()
該方法接受一個數值 n 作為參數，并返回存儲中的第 n 個鍵名。
Storage.getItem()
該方法接受一個鍵名作為參數，返回鍵名對應的值。
Storage.setItem()
該方法接受一個鍵名和值作為參數，將會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。
Storage.removeItem()
該方法接受一個鍵名作為參數，并把該鍵名從存儲中刪除。
Storage.clear()
調用該方法會清空存儲中的所有鍵名。
LocalStorage 和 SessionStorage 共同實現了這些API，可以看到API非常簡單，只有5個API函數和一個只讀的length屬性，我們先看一下LocalStorage 的 DEMO，里面示范了除了key() 函數之外的API。
rLVvMN
可以看到，storage 的API用例還是很簡單的。
還有一個storage 的 Event事件，在LocalStorage 和 sessionStorage 變更的時候會觸發一個Storage 的事件，但是只能在同源策略下觸發，并且在當前窗口是不能觸發的。也就是說在同一個瀏覽器中，A標簽頁變更Storage，B標簽頁會觸發這個事件，在A里面是不行的，同時不在同一個瀏覽器里面也是無法觸發的。
Storage事件的屬性如下：
target Read only EventTarget The event target (the topmost target in the DOM tree). type Read only DOMString The type of event. bubbles Read only boolean Does the event normally bubble? cancelable Read only boolean Is it possible to cancel the event? key Read only DOMString (string) The key being changed. oldValue Read only DOMString (string) The old value of the key being changed. newValue Read only DOMString (string) The new value of the key being changed. url Read only DOMString (string) The address of the document whose key changed. storageArea Read only Storage The Storage object that was affected.
無論是LocalStorage 、sessionStorage 還是cookie 都有各自的優劣，下表我們來列舉一下他們的對比情況。
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 數據的生命期 | 一般由服務器生成，可設置失效時間。如果在瀏覽器端生成Cookie，默認是關閉瀏覽器后失效 | 除非被清除，否則永久保存 | 僅在當前會話下有效，關閉頁面或瀏覽器后被清除 |
| 存放數據大小 | 4K左右 | 一般為5MB | |
| 與服務器端通信 | 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信 | |
| 易用性 | 需要程序員自己封裝，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 | |
當然還有以下情況：
cookie由服務端生成，用于標識用戶身份；而兩個storage用于瀏覽器端緩存數據
三者都是鍵值對的集
cookie的話，會隨http請求一起發送到服務器；而兩個storage可以由腳本選擇性的提交
會話的storage會在會話結束后銷毀；而localStorage會一直存在直到手動銷毀。cookie會在過期時間之后銷毀。
安全性方面，cookie中一般不建議存儲敏感信息。兩個storage的數據提交后在服務端一定要校驗（其實任何payload和qs里的參數都要校驗）。
目前，對于LocalStorage的介紹大概就到此為止了，可能有某些錯誤的地方，也可能有些不準確的地方，歡迎各位指出斧正。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86312.html
背景 隨著前端技術日新月異地快速發展，web應用功能和體驗也逐漸發展到可以和原生應用媲美的程度，前端緩存技術的應用對這起到了不可磨滅的貢獻，因此想一探前端的緩存技術，這篇文章主要會介紹在日常開發中比較少接觸的IndexedDB IndexedDB 什么是IndexedDB IndexedDB簡單理解就是前端數據庫，提供了一種在用戶瀏覽器中持久存儲數據的方法，但是和前端關系型數據不同的是，Index...
摘要：學完的基礎語法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉的基礎語法使用。 學完vue的基礎語法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉vue的基礎語法使用。詳細vue教程請移步vue.js 2.0 技術框架 1.vue.js 2.0 2.bootstrap 語法概述 這里只寫一點此例子用到的一些語法知識，詳細API請移步：vue 2.0 a...
閱讀 2269·2021-11-23 09:51
閱讀 5656·2021-09-22 15:39
閱讀 3343·2021-09-02 15:15
閱讀 3492·2019-08-30 15:54
閱讀 2354·2019-08-30 15:53
閱讀 1397·2019-08-30 14:04
閱讀 2445·2019-08-29 18:33
閱讀 2364·2019-08-29 13:08
