詳解BOM的存儲對象

詳解BOM的存儲對象

今天來講一下BOM中的最後一部分內容，BOM的存儲對象。在JavaScript中以前有cookie對象可以對一部分數據進行存儲，但是安全性低，並且容量有限。所有就有了現在的BOM中的存儲對象 sessionStroage 和 localstroage 對象。

HTML代碼：

    <h1>02BOM的儲存對象</h1>
    <h3>sessionStorage</h3>
    <button>setItem()</button>
    <button>getItem()</button>
    <button>removeItem()</button>
    <button>clear()</button>
    <a href="00列表頁面.html">跳轉</a>
    <h3>localStorage</h3>
    <button>setItem()</button>
    <button>getItem()</button>
    <button>removeItem()</button>
    <button>clear()</button>

1.sessionStroage對象

    var aBtns = document.getElementsByTagName("button");
    // sessionStorage  創建一個本地緩存  鍵值對   會話緩存

    // 保存數據   sessionStorage.setItem("key","value");
    aBtns[0].onclick = function () {
        sessionStorage.setItem("name", "張三");
        sessionStorage.setItem("age", 13);
        sessionStorage.setItem("sex", "男");
        sessionStorage.setItem("weight", "80kg");
        sessionStorage.setItem("height", "150cm");
    }

    // 讀取數據   sessionStorage.getItem("key");
    aBtns[1].onclick = function () {
        console.log(sessionStorage.getItem("name"));
    }

    // 移除指定數據   sessionStorage.removeItem("key");
    aBtns[2].onclick = function () {
        sessionStorage.removeItem("name");
    }

    // 清空所有數據  clear()
    aBtns[3].onclick = function () {
        sessionStorage.clear();
    }

2.localStroage對象

    // localStorage   創建一個本地緩存  鍵值對   只能手動刪除
    // 保存數據   sessionStorage.setItem("key","value");
    aBtns[4].onclick = function () {
        localStorage.setItem("name", "張三");
        localStorage.setItem("age", 13);
        localStorage.setItem("sex", "男");
        localStorage.setItem("weight", "80kg");
        localStorage.setItem("height", "150cm");
    }

    // 讀取數據   sessionStorage.getItem("key");
    aBtns[5].onclick = function () {
        console.log(localStorage.getItem("name"));
    }

    // 移除指定數據   sessionStorage.removeItem("key");
    aBtns[6].onclick = function () {
        localStorage.removeItem("name");
    }

    // 清空所有數據  clear()
    aBtns[7].onclick = function () {
        localStorage.clear();
    }

總結： 兩者都可創建一個鍵值對格式的本地緩存，區別在於sessionStroage是會話緩存，當頁面關閉後緩存數據會被清除，而localstroage只有手動刪除纔會被清除。

視頻講解鏈接：
https://www.bilibili.com/video/BV1kA411v7kQ/