localStorage與sessionStorage的區別
阿新 • • 發佈：2021-08-25
Web 儲存物件localStorage和sessionStorage允許我們在瀏覽器上儲存鍵/值對。
我們已經有了 cookie。為什麼還要其他儲存物件呢？
- 與 cookie 不同，Web 儲存物件不會隨每個請求被髮送到伺服器。因此，我們可以儲存更多資料。大多數瀏覽器都允許儲存至少 2MB 的資料（或更多），並且具有用於配置資料的設定。
- 還有一點和 cookie 不同，伺服器無法通過 HTTP header 操縱儲存物件。一切都是在 JavaScript 中完成的。
- 儲存繫結到源（域/協議/埠三者）。也就是說，不同協議或子域對應不同的儲存物件，它們之間無法訪問彼此資料。
相同點：
- 儲存的內容為鍵值對，鍵和值都必須是字串，我們可以使用JSON來儲存物件
- 儲存大小限制為 5MB+，具體取決於瀏覽器。
- 它們不會過期。
- 資料繫結到源（域/埠/協議）。
不同點：
- sessionStorage頁面重新整理後資料仍然保留（但標籤頁關閉後資料則不再保留）
localStorage在同源的所有標籤頁和視窗之間共享資料，sessionStorage在當前瀏覽器標籤頁中可見，包括同源的 iframe
API：
setItem(key, value)—— 儲存鍵/值對。getItem(key)—— 按照鍵獲取值。removeItem(key)—— 刪除鍵及其對應的值。clear()—— 刪除所有資料。key(index)—— 獲取該索引下的鍵名。length—— 儲存的內容的長度。- 使用
Object.keys來獲取所有的鍵。 - 我們將鍵作為物件屬性來訪問，在這種情況下，不會觸發
storage事件。
Storage 事件：
- 在呼叫
setItem，removeItem，clear方法後觸發。 - 包含有關操作的所有資料（
key/oldValue/newValue），文件url和儲存物件storageArea。 - 在所有可訪問到儲存物件的
window物件上觸發，導致當前資料改變的window物件除外（對於sessionStorage是在當前標籤頁下，對於localStorage是在全域性，即所有同源的視窗）。
localStorage的應用
場景一：將使用者習慣的語言存入瀏覽器中，下次進入時優先選取設定的語言
window.localStorage.setItem(LOCALE_KEY, lang)
場景二：自動儲存表單欄位，如果使用者不小心關閉了頁面，然後重新開啟，他會發現之前未完成的輸入仍然保留在那裡。
<!doctype html>
<textarea style="width:200px; height: 60px;" id="area" placeholder="Write here"></textarea>
<br>
<button onclick="localStorage.removeItem('area');area.value=''">Clear</button>
<script>
area.value = localStorage.getItem('area');
area.oninput = () => {
localStorage.setItem('area', area.value)
};
</script>
參考連結：
https://zh.javascript.info/localstorage