當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

浅析localstorage、sessionstorage

發布時間：2024/1/3 综合教程 43 生活家

生活随笔收集整理的這篇文章主要介紹了浅析localstorage、sessionstorage 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡介

html5 中的 Web Storage 包括了兩種存儲方式：sessionStorage 和 localStorage。 sessionStorage 用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問，會話結束后數據也隨之銷毀。localStorage 用于存儲一個域名下的需要永久存在在本地的數據，這些數據可以被一直訪問，直到這些數據被刪除。因此sessionStorage 和 localStorage 的主要區別在于他們存儲數據的生命周期，sessionStorage 存儲的數據的生命周期是一個會話，而 localStorage 存儲的數據的生命周期是永久，直到被主動刪除，否則數據永遠不會過期的。

Web Storage 和 cookie 的異同點及優劣勢

Web Storage 和 cookie 有許多相同之處：

它們都可以用于存儲用戶數據
它們存儲數據的格式都是字符串形式
它們存儲的數據都有大小限制

Web Storage 和 cookie 也有不同之處：

它們的生命周期不同。sessionStorage 的生命周期是一個會話，localStorage的生命周期是永久，cookie 的生命周期可以自定義，cookie 可以設置過期時間，數據在過期時間之前可以訪問。
它們的存儲大小限制不同。大部分現代瀏覽器 Storage 的存儲限制大小為 5M，cookie 的存儲大小限制為 4K。
瀏覽器支持不同，API 調用方式不同。

相比 cookie ，Web Storage 的優點主要表現在存儲空間更大，可存儲的內容更大。cookie每次都隨請求數據發送到服務器端，Web Storage不會和請求數據一同發送到服務器端，占用帶寬更少。缺點主要表現在，現在所有瀏覽器都支持 cookie 操作，而只有現在瀏覽器才支持 Web Storage 操作，如果需要兼容老舊瀏覽器，就不能使用 Web Storage。

Web Storage API

localStorage 和 sessionStorage 有著統一的API接口，這為二者的操作提供了極大的便利。下面以 localStorage 為例來介紹一下 API 接口使用方法，同樣這些接口也適用于 sessionStorage。

添加鍵值對：localStorage.setItem(key, value)setItem?用于把值 value 存儲到鍵key上，除了使用?setItem?，還可以使用?localStorage.key = value?或者?localStorage['key'] = value?這兩種形式。另外需要注意的是，key和value值必須是字符串形式的，如果不是字符串，會調用它們相應的toString()?方法來轉換成字符串再存儲。當我們要存儲對象是，應先轉換成我們可識別的字符串格式（比如JSON格式）再進行存儲。


    // 把一個用戶名(lilei)存儲到 name 的鍵上
    localStorage.setItem('name', 'lilei');
    // localStorage.name = 'lilei';
    // localStorage['name'] = 'lilei';
    // 把一個用戶存儲到user的鍵上
    localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));

獲取鍵值：localStorage.getItem(key)getItem?用于獲取鍵 key 對應的數據，和?setItem?一樣，getItem?也有兩種等效形式?value = localStorage.key和?value = localStorage['key']?。獲取到的 value 值是字符串類型，如果需要其他類型，要做手動的類型轉換。


    // 獲取存儲到 name 的鍵上的值
    var name = localStorage.getItem('name');
    // var name = localStorage.name;
    // var name = localStorage['name'];
    // 獲取存儲到user的鍵上的值
    var user = JSON.parse(localStorage.getItem('user'));

刪除鍵值對：localStorage.removeItem(key)removeItem?用于刪除指定鍵的項，localStorage 沒有數據過期的概念，所有數據如果失效了，需要開發者手動刪除。

    var name = localStorage.getItem('name'); // 'lilei'
    // 刪除存儲到 name 的鍵上的值
    localStorage.removeItem('name');
    name = localStorage.getItem('name'); // null

清除所有鍵值對：localStorage.clear()clear?用于刪除所有存儲的內容，它和removeItem不同的地方是removeItem?刪除的是某一項，而clear是刪除所有。

    // 清除 localStorage
    localStorage.clear();
    var len = localStorage.length; // 0

獲取 localStorage 的屬性名稱(鍵名稱)：localStorage.key(index)key?方法用于獲取指定索引的鍵名稱。需要注意的是賦值早的鍵值對應的索引值大，賦值完的鍵值對應的索引小,?key方法可用于遍歷 localStorage 存儲的鍵值。

    localStorage.setItem('name','lilei');
    var key = localStorage.key(0); // 'name'
    localStorage.setItem('age', 10);
    key = localStorage.key(0); // 'age'
    key = localStorage.key(1); // 'name'

獲取 localStorage 中保存的鍵值對的數量：localStorage.lengthlength?屬性用于獲取 localStorage 中鍵值對的數量。

    localStorage.setItem('name','lilei');
    var len = localStorage.len; // 1
    localStorage.setItem('age', 10);
    len = localStorage.len; // 2

Web Storage 事件

storage 事件當存儲的數據發生變化時，會觸發 storage 事件。但要注意的是它不同于click類的事件會事件捕獲和冒泡，storage 事件更像是一個通知，不可取消。觸發這個事件會調用同域下其他窗口的storage事件，不過觸發storage的窗口（即當前窗口）不觸發這個事件。storage 的 event 對象的常用屬性如下：
```
  oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。
  newValue：更新后的值。如果該鍵被刪除，則這個屬性為null。
  url：原始觸發storage事件的那個網頁的網址。
  key：存儲store的key名
```

    function storageChanged() {
        console.log(arguments);
    }

    window.addEventListener('storage', storageChanged, false);

使用場景

基于 Web Storage 的特點，它主要被用于儲存一些不經常改動的，不敏感的數據，比如全國省市區縣信息。還可以存儲一些不太重要的跟用戶相關的數據，比如說用戶的頭像地址、主題顏色等，這些信息可以先存儲在用戶本地一份，便于快速呈現，等真正從服務器端讀取成功后再更改頭像地址，主題顏色。另外，基于 storage 事件特點，Web Storage 還可以用于同域不同窗口間的通信。
來源：?https://my.oschina.net/u/2282680/blog/791180

總結

以上是生活随笔為你收集整理的浅析localstorage、sessionstorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。