HTML5 Storage：localStorage 與 sessionStorage
TWGD / 2019-01-11 / 閱讀時間約 1 分鐘
localStorage 與 sessionStorage 主要差別
生命週期的長短
根據 MDN 的資料：
localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
- localStorage：基本上生命週期無限，除非自行刪除。
- sessionStorage：當頁面關閉生命週期就結束。也就是只存在這個頁面的 session，若新開一個視窗或 tab，就無法存取了。
簡單例子
一個簡單的表單，實際體會 localStorage 與 sessionStorage 的生命週期。 用瀏覽器開啟檔案，輸入並儲存 localStorage 與 sessionStorage； 另開一個新的 tab 之後，local 這個 input 的欄位有值，session 這個 input 的欄位裡沒有。
<body>
<div>
localStorage：<input type="text" class="localStorage" name="local" /><br />
sessionStorage：<input type="text" class="sessionStorage" name="session" /><br />
<button class="save">save</button><br />
<button class="reset">reset</button><br />
</div>
<script>
window.addEventListener('load', function () {
document.querySelector('.localStorage').value = localStorage.getItem('local')
document.querySelector('.sessionStorage').value = sessionStorage.getItem('session')
})
document.querySelector('.save').addEventListener('click', function () {
localStorage.setItem('local', document.querySelector('.localStorage').value) // 儲存這個 localStorage
sessionStorage.setItem('session', document.querySelector('.sessionStorage').value) // 儲存這個 sessionStorage
})
document.querySelector('.reset').addEventListener('click', function () {
localStorage.removeItem('local') // 清除這個 localStorage
sessionStorage.removeItem('session') // 清除這個 sessionStorage
})
</script>
</body>localStorage 與 sessionStorage 基本用法
localStorage 與 sessionStorage 用法基本上都差不多。
注意：key 與 value 都是字串型態。( 因為存取的是 Storage object，與 objects 一樣，型態會強制轉換成字串 )。
// Save data to sessionStorage
sessionStorage.setItem('key', 'value')
// Get saved data from sessionStorage
let data = sessionStorage.getItem('key')
// Remove saved data from sessionStorage
sessionStorage.removeItem('key')
// Remove all saved data from sessionStorage
sessionStorage.clear()