js 的本地儲存 localStorage、sessionStorage

阿新 • • 發佈：2021-12-02

本地儲存特性

資料儲存在使用者瀏覽器中
設定、讀取方便，甚至頁面重新整理也不丟失資料
容量較大，sessionStorage 約5M，localStorage容量約20M
只能儲存字串，可以將物件JSON.stringify()編碼後再儲存

localStorage：關閉瀏覽器後資料仍然存在，直到手動刪除為止

生命週期永久有效。除非手動刪除，否則關閉頁面也會存在
可以多視窗（頁面）共享（同一瀏覽器可以共享）
以鍵值對的形式儲存使用
window.localStorage中的 window 可以省略

sessionStorage：重新整理當前頁後資料仍然存在，但關閉當前頁後資料就沒有了

生命週期是瀏覽器的生命週期，瀏覽器關閉即消失

在同一個視窗（頁面）下資料可以共享
以鍵值對的形式儲存使用
window.sessionStorage中的 window 可以省略

localStorage

程式碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            <button>使用 localStorage </ 
button>
            <input class="input" placeholder="請輸入使用者名稱" />
            <button class="save">儲存使用者名稱</button>
            <button class="get">獲取使用者名稱</button>
            <button class="remove">刪除使用者名稱</button>
            <button class="clear">清除所有使用者名稱</ 
button>
        </div>
    </body>

    <script>
        /**
         * 本地儲存特性
         * 1、 資料儲存在使用者瀏覽器中
         * 2、設定、讀取方便，甚至頁面重新整理也不丟失資料
         * 3、容量較大，sessionStorage 約5M，localStorage容量約20M
         * 4、只能儲存字串，可以將物件JSON.stringify()編碼後再儲存
         * */
        /**
         * localStorage
         * 1、生命週期永久有效。除非手動刪除，否則關閉頁面也會存在
         * 2、可以多視窗（頁面）共享（同一瀏覽器可以共享）
         * 3、以鍵值對的形式儲存使用
         * 4、window.localStorage中的 window 可以省略
         * */
        var inputL = document.querySelector(".input");
        var saveL = document.querySelector(".save");
        var getL = document.querySelector(".get");
        var removeL = document.querySelector(".remove");
        var clearL = document.querySelector(".clear");

        saveL.addEventListener("click", () => {
            var name = inputL.value;
            //window 可以省略
            window.localStorage.setItem("username", name);
        })
        getL.addEventListener("click", () => {
            // 獲取使用者名稱
            console.log("localStorage 使用者名稱：", window.localStorage.getItem("username"));
        })
        removeL.addEventListener("click", () => {
            localStorage.removeItem("username");
        })
        clearL.addEventListener("click", () => {
            localStorage.clear();
        })
    </script>
</html>

sessionStorage

程式碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            <button>使用sessionStorage</button>
            <input id="input" placeholder="請輸入使用者名稱" />
            <button id="save">儲存使用者名稱</button>
            <button id="get">獲取使用者名稱</button>
            <button id="remove">刪除使用者名稱</button>
            <button id="clear">清除所有使用者名稱</button>
        </div>
    </body>

    <script>
        /**
         * 本地儲存特性
         * 1、 資料儲存在使用者瀏覽器中
         * 2、設定、讀取方便，甚至頁面重新整理也不丟失資料
         * 3、容量較大，sessionStorage 約5M，localStorage容量約20M
         * 4、只能儲存字串，可以將物件JSON.stringify()編碼後再儲存
         * */
        /**
         * sessionStorage 
         * 生命週期是瀏覽器的生命週期，瀏覽器關閉即消失
         * 在同一個視窗（頁面）下資料可以共享
         * 以鍵值對的形式儲存使用
         * window.sessionStorage中的 window 可以省略
         * */
        var input = document.querySelector("#input");
        var save = document.querySelector("#save");
        var get = document.querySelector("#get");
        var remove = document.querySelector("#remove");
        var clear = document.querySelector("#clear");

        save.addEventListener("click", () => {
            var name = input.value;
            //window 可以省略
            window.sessionStorage.setItem("username", name);
        })
        get.addEventListener("click", () => {
            // 獲取使用者名稱
            console.log("sessionStorage 使用者名稱：", window.sessionStorage.getItem("username"));
        })
        remove.addEventListener("click", () => {
            sessionStorage.removeItem("username");
        })
        clear.addEventListener("click", () => {
            sessionStorage.clear();
        })
    </script>
</html>