搜尋

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

JavaScript使用localStorage儲存數據

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

本篇文章為大家帶來了關於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刪除
上一篇：整理JavaScript中cookie操作對象的應用下一篇：整理JavaScript中cookie操作對象的應用

相關文章

看更多