摘要:基本方法添加鍵值對,如果存在時,更新。清除所有鍵值對。也就是說,只要用戶不主動刪除,存儲的數據將會永久存在。在使用進行存取操作的同時,如果需要對存取操作進行監聽,可以使用內置的事件監聽器對數據進行監控。
1.localStorage 基本方法
添加鍵值對:localStorage.setItem(key,value),如果key存在時,更新value。
獲取鍵值:localStorage.getItem(key),如果key不存在返回null。
刪除鍵值對:localStorage.removeItem(key)。key對應的數據將會全部刪除。
清除所有鍵值對:localStorage.clear()。如果調用clear()方法,清空localStorage中所有信息,那么key、oldValue和newValue都會被設置為null。
獲取localStorage的屬性名稱(鍵名稱):localStorage.key(index)。
還有一個和普通對象不一樣的屬性length:
獲取localStorage中保存的鍵值對的數量:localStorage.length。
2.存儲格式localStorage對象的鍵和值只能是字符串,假設我們要保存一個對象到localStorage中,可以使用拼接的方式。當然也可以借助JSON類,將對象轉換成字符串保存,然后在取出來的時候將json字符串轉換成真正可用的json對象格式
3.生命周期在數據存儲的時效性上,localStorage并不會像cookie那樣可以設置數據存活的時限。也就是說,只要用戶不主動刪除,localStorage存儲的數據將會永久存在。
sessionStorage生命周期為當前窗口或標簽頁,一旦窗口或標簽頁被永久關閉了,那么所有通過sessionStorage存儲的數據也就被清空了。
4.存儲位置不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage(頁面屬于相同域名和端口),但是不同頁面或標簽頁間無法共享sessionStorage的信息。這里需要注意的是,頁面及標簽頁僅指頂級窗口,如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面,那么他們之間是可以共享sessionStorage的。
5.存儲大小對于HTML5的localStorage而言,其大小支持為5M(當然,各瀏覽器的大小差異還是有的)。對于IE的userData,用戶數據的每個域最大為64KB。
6.應用場景建議不要使用localStorage方式存儲敏感信息,哪怕這些信息進行過加密。另外,對身份驗證數據使用localStorage進行存儲還不太成熟。我們知道,通常可以通過xss漏洞來獲取到Cookie,然后用這個Cookie進行身份驗證登錄,但是瀏覽器可以通過HttpOnly來保護Cookie不被XSS攻擊獲取到。而localStorage存儲沒有對XSS攻擊有任何防御機制,一旦出現XSS漏洞,那么存儲在localStorage里的數據就極易被獲取到。
7.storage事件當存儲的storage數據發生變化時都會觸發它,但是它不同于click類的事件會冒泡和能取消,storage改變的時候,觸發這個事件會調用所有同域下其他窗口的storage事件,不過它本身觸發storage即當前窗口是不會觸發這個事件的(當然ie這個特例除外,它包含自己本事也會觸發storage事件)。
在使用 Storage 進行存取操作的同時,如果需要對存取操作進行監聽,可以使用 HTML5 Web Storage api 內置的事件監聽器對數據進行監控。只要 Storage 存儲的數據有任何變動,Storage 監聽器都能捕獲。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107647.html
摘要:本地存儲的方案傳統把信息存儲到客戶端的瀏覽器中但是項目服務器端也是可以獲取的把信息存儲到服務器上的服務器存儲永久存儲在客服端的本地。 在客戶端運行的js是不能操作用戶電腦磁盤中的文件的(這是為了保護客戶端運行的安全)。 1、js中的本地存儲: 使用js向瀏覽器的某一個位置中存儲一些內容,瀏覽器即使關閉了,存儲的信息也不會銷毀,當在重新打開瀏覽器的時候我們依然可以獲取到上一次存儲的信息。...
摘要:通常,它用于告知服務端兩個請求是否來自同一瀏覽器,如保持用戶的登錄狀態。使基于無狀態的協議記錄穩定的狀態信息成為了可能。標記為的只應通過被協議加密過的請求發送給服務端。 前記 前面我已經寫了一篇關于Cookie的文章,但是那時候我其實理解的并不是很深刻,會有些搞不懂的地方,今天我就再寫一次,博客也是我的學習筆記 Cookie Cookie是服務器發送到用戶瀏覽器并保存在本地的一小塊數據...
摘要:移動端緩存失效是我印象最深的一個之一,為啥呢,因為這個問題導致我加班到很晚。的生命周期是僅在當前會話下有效。引入了一個瀏覽器窗口的概念,是在同源的窗口中始終存在的數據。無bug,不程序:作為程序員的我,不是修bug就是在寫bug的路上。 移動端sessionStorage緩存失效是我印象最深的一個bug之一,為啥呢,因為這個問題導致我加班到很晚。在現在看來就是一個簡單的概念問題。在我剛工作...
摘要:定時器時間到了就將中存的信息以及存的時間信息就是那個對象中的刪掉就行了。難道存了三條我就做三個定時器存的條我就做個定時器這也太了而且也并不符合實際。 一、酷酷的開頭 在潛水的時間長達一年之后,我終于鼓起勇氣開始寫我的第一篇文章了。前端小菜,只是想記錄一下自己的想法,望各位看到這文的大佬輕噴。 在現在前后端分離的開發模式下,存儲信息一般都不在使用以往使用的cookie了,就拿筆主我之前做...
摘要:已經超出本地存儲限定大小可進行超出限定大小之后的操作,如下面可以先清除記錄,再次保存面試官一波素質三連對于只是會使用的同學來說,肯定是不得其解的。 最近面試的時候關于html5API總會被問到localStorage的問題, 對于一般的問題很簡單,無非就是 localStorage、sessionStorage和cookie這三個客戶端緩存的區別 localStorage的API,g...
閱讀 2967·2021-11-25 09:43
閱讀 3633·2021-08-31 09:41
閱讀 1237·2019-08-30 15:56
閱讀 2119·2019-08-30 15:55
閱讀 2993·2019-08-30 13:48
閱讀 2816·2019-08-29 15:15
閱讀 984·2019-08-29 15:14
閱讀 2657·2019-08-28 18:26