借放一下啊！localStorage 與 sessionStorage

有借無還。

簡述

兩個都是用來儲存資料，儲存範圍是以「Domain」為單位，例如說你在 google.com 儲存了 username: PeaNu，那就只有在這個 Domain 裡面可以存取，超出這個範圍就拿不到。

查看方式（一張圖勝千言）：

兩個的差異：

• localStorage 永久保存 AND 不同分頁可以共用儲存的內容
• sessionStorage 關掉瀏覽器就消失 AND 每個分頁獨立儲存，不能共用

其他注意事項：

• value 只能儲存字串（別忘了 JSON 也是字串，所以這樣就很好用了）

localStorage

介紹一下基本用法：

• window.locaoStorage.setItem(key, value)
• window.locaoStorage.getItem(keyName)
• window.locaoStorage.rmoevItem(keyNmae)

（window 可省略，因為 window 是瀏覽器下的全域物件）

<div class="input-block">
  <span class="input-block__text">姓名：</span>
  <input class="input-block__input" type="text" size="20">
  <button class="input-block__button">儲存</button>
</div>
<!-- 用來顯示儲存的內容 -->
<div class="block"></div>
<div class="block"></div>

JavaScript：

/*
  重新整理後到 localStorage 抓內容
  分別寫入：
  .input-block__input: 輸入框
  .input-block__input: 第一個區塊（JSON 解析後抓內容）
  .input-block__input: 第二個區塊（原始字串）
*/
const oldValue = localStorage.getItem('username')
if (oldValue) {
  document.querySelector('.input-block__input').value = oldValue
  document.querySelectorAll('.block')[0].innerText = JSON.parse(oldValue).username
  document.querySelectorAll('.block')[1].innerText = oldValue
}
// 按下按鈕儲存
document.querySelector('.input-block__button')
  .addEventListener('click', function(e) {
    setLocalStorage('.input-block__input', 'username')
  }, false)

// 支援 Enter 鍵 
window.addEventListener('keydown', function(e) {
  e.stopPropagation()
  if (e.key === 'Enter') setLocalStorage('.input-block__input', 'username')
}, true)

// 儲存到 localStorage
function setLocalStorage(selector, key) {
  const input = document.querySelector(selector).value
  if (input)  return localStorage.setItem(key, input)
  alert('請輸入你想儲存的內容')
}

seesionStorage

用法跟 localStorage 差不多：

• window.sessionStorage.setItem(key, value)
• window.sessionStorage.getItem(keyName)
• window.sessionStorage.rmoevItem(keyNmae)

特別注意每個分頁都會建立一個 session，因此不同分頁不能共用內容，另外關掉瀏覽器後會清除所有內容，這點是跟 loaclStorage 最大的差別。

有點類似遊戲裡面的「密語視窗」吧，你只要視窗沒關掉對話紀錄就會保留，但一關掉就會清除。開新分頁可以想成是開新的密語視窗，等同網頁中的建立新的「session」。至於內容的部分就跟聊天室窗一樣，因為是全新的 session，所以當然不會有以前的紀錄，內容會是空的。

一樣簡單示範（其實就只是都改成 sessionStorage）：

<div class="input-block">
  <span class="input-block__text">姓名：</span>
  <input class="input-block__input" type="text" size="20">
  <button class="input-block__button">儲存</button>
</div>
<!-- 用來顯示儲存的內容 -->
<div class="block"></div>
<div class="block"></div>

JavaScript：

/*
  重新整理後到 sessionStorage 抓內容
  分別寫入：
  .input-block__input: 輸入框
  .input-block__input: 第一個區塊（JSON 解析後抓內容）
  .input-block__input: 第二個區塊（原始字串）
*/
const oldValue = sessionStorage.getItem('username')
if (oldValue) {
  document.querySelector('.input-block__input').value = oldValue
  document.querySelectorAll('.block')[0].innerText = JSON.parse(oldValue).username
  document.querySelectorAll('.block')[1].innerText = oldValue
}


// 按下按鈕儲存
document.querySelector('.input-block__button')
  .addEventListener('click', function(e) {
    setSessionStorage('.input-block__input', 'username')
  }, false)

// 支援 Enter 鍵 
window.addEventListener('keydown', function(e) {
  e.stopPropagation()
  if (e.key === 'Enter') setSessionStorage('.input-block__input', 'username')
}, true)

// 儲存到 localStorage
function setSessionStorage(selector, key) {
  const input = document.querySelector(selector).value
  if (input)  return sessionStorage.setItem(key, input)
  alert('請輸入你想儲存的內容')
}