HTML5 Storage：localStorage 與 sessionStorage
TWGD / 2019-01-11
localStorage 與 sessionStorage 主要差別
生命週期的長短
根據 MDN 的資料：
❗ unsupported type: quote簡單例子
一個簡單的表單，實際體會 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();