localStorage 跟 sessionStorage 方法跟屬性都是一致的，最大的差別就是一個是永久的cache，永久儲存在本地端的DB，一個是只要不關閉網頁，就算你重新整理網頁或導向其他網頁再回來，都還會保存住資料，只有在關閉後就會把資料刪除。
| localStorage | sessionStorage |
| 永久儲存Data在本機中 | 只要把整個分頁關掉， 就會刪除資料。 |
屬性
Storage.length Read only返回一數字，代表儲存在 Storage 中的物件的數量。
方法
Storage.key()– 當傳入一數字n, 會返回 storage 裡第 n 個值的 key 值。Storage.getItem()– 當傳入一 key 值, 會返回 storage 裡此 key 值對應的 value 。Storage.setItem()– 當傳入 key 及 value 的值, 會在 storage 裡新增此 key 及 value 值，若 key 已存在，則會把值更新成傳入的 value。Storage.removeItem()– 當傳入一 key 值, 會把此 key 從 storage 裡刪除。Storage.clear()– 執行此方法，會刪除所有在 storage 裡的 key。
範例:
你曾經按過幾次按鈕: 0
你曾經按過幾次按鈕: 0
<div>
<button onclick='localSave()'>儲存 localStorage</button>
<div>你曾經按過幾次按鈕: <span id='result1'>0</span>
</div>
<button onclick='clearLocal()'>清空 localStorage</button>
</div>
<br/><br/>
<div>
<button onclick='sessionSave()'>儲存 sessionStorage</button>
<div>你曾經按過幾次按鈕: <span id='result2'>0</span>
</div>
<button onclick='clearSession()'>清空 sessionStorage</button>
</div>
<script>
let preLocalCount = localStorage.getItem('count');
let preSessionCount = sessionStorage.getItem('count')
if(preLocalCount)
document.getElementById('result1').textContent = preLocalCount;
if(preSessionCount)
document.getElementById('result2').textContent = preSessionCount;
function localSave () {
preLocalCount = localStorage.getItem('count');
if(!preLocalCount)
preLocalCount = 0;
localStorage.setItem('count', parseInt(preLocalCount) + 1)
document.getElementById('result1').textContent = localStorage.getItem('count');
}
function sessionSave () {
preSessionCount = sessionStorage.getItem('count');
if(!preSessionCount)
preSessionCount = 0;
sessionStorage.setItem('count', parseInt(preSessionCount) + 1)
document.getElementById('result2').textContent = sessionStorage.getItem('count');
}
function clearLocal () {
localStorage.removeItem('count');
document.getElementById('result1').textContent = 0;
}
function clearSession () {
sessionStorage.removeItem('count');
document.getElementById('result2').textContent = 0;
}
</script>@copyright MRcodingRoom
觀看更多文章請點MRcoding筆記
觀看更多文章請點MRcoding筆記
