LocalStorage

可存取跨瀏覽頁狀態，重新整理頁面後，資料會繼續存在，無儲存的期限限制。

SessionStorge

使用方式和 Local Storage 相同。Session Storge 只存在同一個分頁，分頁關掉資料就消失，相較 Local Storage 儲存的有效期限較短。

儲存的格式

儲存的方式為一個 key 和 values（只能存字串）

如何使用：

新增一個物件 item
localStorage.setItem('key', 'value')
讀取 Storage 內物件
localStorage.getItem('key')
移除 Storage 內物件
localStorage.removeItem('key')
刪除 Storage 內所有物件
localStorage.clean()

實作用 localStorage 儲存值

<body>
    <div class="storage">
        <input class="text"><button>儲存</button>
    </div>
    <script>
        const oldValue = localStorage.getItem('text'); //用 getItem 拿到所指定 key 是`test` 這個 item
        document.querySelector('.text').value = oldValue;

        document.querySelector('button').addEventListener (
            'click', function () {               
                const value = document.querySelector('.text').value; //選取到 text 中，輸入框內所輸入的值，用 .value 取得
                localStorage.setItem('text', value); //利用setItem，增加一個資料物件 item 到其中，設定一個叫 test 的 key，所輸入的值存在 value
            }
        )
    </script>

</body>

參考資料：
MDN - Window.localStorage
localStorage 的使用