首頁  >  文章  >  web前端  >  JavaScript使用localStorage儲存數據

JavaScript使用localStorage儲存數據

WBOY
WBOY轉載
2022-08-05 11:54:333361瀏覽

本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了JavaScript使用localStorage存儲數據,文中示例代碼介紹的非常詳細,具有一定的參考價值,希望對大家有幫助。

JavaScript使用localStorage儲存數據

【相關推薦:javascript影片教學web前端

##背景

以前js都是

Session#Cookie 來儲存訊息,彷彿我還停留在那個時候,一問同事有沒有新的solution,才知道現在已經有HTML5 localStorage 本機儲存這個東西,可以在瀏覽器端儲存資料。

記得最早的

Cookies只能存很小的東西,4KB的樣子,而且安全性很差,在IE6時代一個網域也只能二十個Cookies吧,限制挺大,當然IE還有userData的東西,沒什麼用。 Flash也帶了一個Storage,相對比較大,空間是Cookie的25倍左右,當時現在也廢棄Flash了。

到了H5時代,就統一了,

LocalStorage一統天下。官方建議是每個網站 5MB ,非常大了,雖然瀏覽器設定會有差異,但是一般就存些JSON或者字串或者快取來說,足夠了。

HTML5 LocalStorage 本機儲存

  • #sessionStorage:已儲存的資料用於瀏覽器的一次會話,當會話結束(通常是該視窗關閉),資料被清空;
  • localStorage:已儲存的資料長期存在,下次造訪該網站的時候,網頁可以直接讀取以前儲存的資料。除了保質期的長短不同,這兩個物件的屬性和方法完全一樣。
它們很像cookie機制的強化版,雖然能夠動用大得多的儲存空間。但是,與cookie一樣,它們也受同域限制。某個網頁存入的數據,只有同域下的網頁才能讀取。

透過檢查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 儲存的數據,都以

「Key-Value鍵值對」的形式存在。也就是說,每一項資料都有一個鍵名和對應的值。所有的資料都是以文字格式儲存。

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法,存储变量名为key,值为value的变量
var valueSession = sessionStorage.getItem("key");  // getItem方法,读取存储变量名为key的值
sessionStorage.removeItem('key');      // removeItem方法,删除变量名为key的存储变量
sessionStorage.clear();        // clear方法,清除所有保存数据
//localStorage 操作
localStorage.setItem("key","value");     // 存储变量名为key,值为value的变量
localStorage.key = "value"        // 同setItem方法,存储数据
var valueLocal = localStorage.getItem("key");   // 读取存储变量名为key的值
var valueLocal = localStorage.key;      // 同getItem,读取数据
localStorage.removeItem('key');      // removeItem方法,删除变量名为key的存储变量
localStorage.clear();         // clear方法,清除所有保存的数据

// 利用length属性和key方法,遍历所有的数据
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 存储 localStorage 数据为 Json 格式
value = JSON.stringify(jsonValue);      // 将 JSON 对象 jsonValue 转化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存转化好的的字符串

// 读取 localStorage 中 Json 格式数据
var value = localStorage.getItem("key");    // 取回 value 变量
jsonValue = JSON.parse(value);      // 把字符串转换成 JSON 对象

Storage 事件

當儲存的資料發生變化時,會觸發 storage 事件。我們可以指定這個事件的回呼函數。

window.addEventListener("storage",onStorageChange);

回呼函數接受一個event物件作為參數。這個event物件的key屬性,保存發生變化的鍵名。

function onStorageChange(e)
{
  console.log(e.key); 
}

除了key屬性,event物件的屬性還有三個:

    oldValue:更新前的值。如果該鍵為新增加,則這個屬性為null。
  • newValue:更新後的值。如果該鍵被刪除,則這個屬性為null。
  • url:原始觸發storage事件的那個網頁的網址。

特別注意的是,該事件不會在導致資料變更的目前頁面觸發。如果瀏覽器同時開啟一個網域下方的多個頁面,當其中的一個頁面改變sessionStorage或localStorage的資料時,其他所有頁面的storage事件會被觸發,而原始頁面不會觸發storage事件。可以透過這種機制,實現多個視窗之間的通訊。在所有瀏覽器之中,只有IE瀏覽器除外,它會在所有頁面觸發storage事件。

擴充知識

1、localStorage和sessionStorage是HTML5 Web儲存的提供的兩種儲存方式,在IE7以上以及大多數瀏覽器都是支援的

2、localStorage和sessionStorage的區別:

(1)、localStorage和sessionStorage一樣都是用來儲存客戶端臨時資訊的物件。

(2)、他們都是只能儲存字串類型的對象(雖然規範中可以儲存其他原生類型的對象,但是目前為止沒有瀏覽器對其進行實現)。

(3)、localStorage生命週期是永久,這表示除非使用者顯示在瀏覽器提供的UI上清除localStorage訊息,否則這些資訊將永遠存在。 (記錄在記憶體中的)

  sessionStorage生命週期為當前視窗或標籤頁,一旦視窗或標籤頁被關閉了,那麼所有透過sessionStorage儲存的資料也就被清空了(回話性質的儲存)

(4)、不同瀏覽器無法分享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁間可以共用相同的localStorage(頁面屬於相同網域和連接埠),但是不同頁面或標籤頁間無法共享sessionStorage的資訊。

  這裡需要注意的是,頁面及標籤頁僅指頂級窗口,如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面,那麼他們之間是可以共享sessionStorage的。 (同源原則)

3、localStorage和sessionStorage可儲存資料的大小一般為5MB

【相關推薦:javascript影片教學web前端

以上是JavaScript使用localStorage儲存數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除