[Week7] - Web Storage 物件:LocalStorage / SessionStorge


Posted by Kayla on 2020-12-30

LocalStorage

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

SessionStorge

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

儲存的格式

儲存的方式為一個 keyvalues(只能存字串)

如何使用:

  • 新增一個物件 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 的使用


#web-storage







Related Posts

 Laradock (2) : 設定

Laradock (2) : 設定

滑動到看不見某個元件,另一個就會元件出現的效果

滑動到看不見某個元件,另一個就會元件出現的效果

MTR04_1203

MTR04_1203


Comments