您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“JavaScript如何使用localStorage存儲數(shù)據(jù)”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
背景
以前js都是 Session 和 Cookie 來存儲信息,仿佛我還停留在那個時候,一問同事有沒有新的solution,才知道現(xiàn)在已經(jīng)有 HTML5 localStorage 本地存儲 這個東西,可以在瀏覽器端儲存數(shù)據(jù)。
記得最早的Cookies只能存很小的東西,4KB的樣子,并且安全性很差,在IE6時代一個域名也只能二十個Cookies吧,限制挺大,當(dāng)然IE還有userData的東西,沒什么用。Flash也帶了一個Storage,相對比較大,空間是Cookie的25倍左右,當(dāng)時現(xiàn)在也廢棄Flash了。
到了H5時代,就統(tǒng)一了,LocalStorage一統(tǒng)天下。官方建議是每個網(wǎng)站 5MB ,非常大了,雖然瀏覽器設(shè)置會有差異,但是一般就存些JSON或者字符串或者緩存來說,足夠了。
HTML5 LocalStorage 本地存儲
sessionStorage:保存的數(shù)據(jù)用于瀏覽器的一次會話,當(dāng)會話結(jié)束(通常是該窗口關(guān)閉),數(shù)據(jù)被清空;
localStorage:保存的數(shù)據(jù)長期存在,下一次訪問該網(wǎng)站的時候,網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長短不同,這兩個對象的屬性和方法完全一樣。
它們很像cookie機(jī)制的強(qiáng)化版,雖然能夠動用大得多的存儲空間。但是,與cookie一樣,它們也受同域限制。某個網(wǎng)頁存入的數(shù)據(jù),只有同域下的網(wǎng)頁才能讀取。
通過檢查window對象是否包含 sessionStorage 和 localStorage 屬性,可以確定瀏覽器是否支持這兩個對象。
function checkStorageSupport() { // sessionStorage if (window.sessionStorage) { return true; } else { return false; } // localStorage if (window.localStorage) { return true; } else { return false; } }
Storage 操作
sessionStorage 和 localStorage 保存的數(shù)據(jù),都以 “Key-Value鍵值對” 的形式存在。也就是說,每一項數(shù)據(jù)都有一個鍵名和對應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存。
//sessionStorage 操作 sessionStorage.setItem("key","value"); // setItem方法,存儲變量名為key,值為value的變量 var valueSession = sessionStorage.getItem("key"); // getItem方法,讀取存儲變量名為key的值 sessionStorage.removeItem('key'); // removeItem方法,刪除變量名為key的存儲變量 sessionStorage.clear(); // clear方法,清除所有保存數(shù)據(jù) //localStorage 操作 localStorage.setItem("key","value"); // 存儲變量名為key,值為value的變量 localStorage.key = "value" // 同setItem方法,存儲數(shù)據(jù) var valueLocal = localStorage.getItem("key"); // 讀取存儲變量名為key的值 var valueLocal = localStorage.key; // 同getItem,讀取數(shù)據(jù) localStorage.removeItem('key'); // removeItem方法,刪除變量名為key的存儲變量 localStorage.clear(); // clear方法,清除所有保存的數(shù)據(jù) // 利用length屬性和key方法,遍歷所有的數(shù)據(jù) for(var i = 0; i < localStorage.length; i++) { console.log(localStorage.key(i)); } // 存儲 localStorage 數(shù)據(jù)為 Json 格式 value = JSON.stringify(jsonValue); // 將 JSON 對象 jsonValue 轉(zhuǎn)化成字符串 localStorage.setItem("key", value); // 用 localStorage 保存轉(zhuǎn)化好的的字符串 // 讀取 localStorage 中 Json 格式數(shù)據(jù) var value = localStorage.getItem("key"); // 取回 value 變量 jsonValue = JSON.parse(value); // 把字符串轉(zhuǎn)換成 JSON 對象
Storage 事件
當(dāng)儲存的數(shù)據(jù)發(fā)生變化時,會觸發(fā) storage 事件。我們可以指定這個事件的回調(diào)函數(shù)。
window.addEventListener("storage",onStorageChange);
回調(diào)函數(shù)接受一個event對象作為參數(shù)。這個event對象的key屬性,保存發(fā)生變化的鍵名。
function onStorageChange(e) { console.log(e.key); }
除了key屬性,event對象的屬性還有三個:
oldValue:更新前的值。如果該鍵為新增加,則這個屬性為null。
newValue:更新后的值。如果該鍵被刪除,則這個屬性為null。
url:原始觸發(fā)storage事件的那個網(wǎng)頁的網(wǎng)址。
特別注意的是,該事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)。如果瀏覽器同時打開一個域名下面的多個頁面,當(dāng)其中的一個頁面改變sessionStorage或localStorage的數(shù)據(jù)時,其他所有頁面的storage事件會被觸發(fā),而原始頁面并不觸發(fā)storage事件??梢酝ㄟ^這種機(jī)制,實(shí)現(xiàn)多個窗口之間的通信。所有瀏覽器之中,只有IE瀏覽器除外,它會在所有頁面觸發(fā)storage事件。
擴(kuò)展知識
1、localStorage和sessionStorage是HTML5 Web存儲的提供的兩種存儲方式,在IE7以上以及大多數(shù)瀏覽器都是支持的
2、localStorage和sessionStorage的區(qū)別:
(1)、localStorage和sessionStorage一樣都是用來存儲客戶端臨時信息的對象。
(2)、他們都是只能存儲字符串類型的對象(雖然規(guī)范中可以存儲其他原生類型的對象,但是目前為止沒有瀏覽器對其進(jìn)行實(shí)現(xiàn))。
(3)、localStorage生命周期是永久,這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息,否則這些信息將永遠(yuǎn)存在。(記錄在內(nèi)存中的)
sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁,一旦窗口或標(biāo)簽頁被關(guān)閉了,那么所有通過sessionStorage存儲的數(shù)據(jù)也就被清空了(回話性質(zhì)的儲存)
(4)、不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage(頁面屬于相同域名和端口),但是不同頁面或標(biāo)簽頁間無法共享sessionStorage的信息。
這里需要注意的是,頁面及標(biāo)簽頁僅指頂級窗口,如果一個標(biāo)簽頁包含多個iframe標(biāo)簽且他們屬于同源頁面,那么他們之間是可以共享sessionStorage的。(同源原則)
3、localStorage和sessionStorage可存儲數(shù)據(jù)的大小一般為5MB
“JavaScript如何使用localStorage存儲數(shù)據(jù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。