前言

網頁的資料都存在哪裡？為什麼換台電腦購物車就清空了？
可以利用 js 寫一些程式碼，將資料存到瀏覽器內。所以可以存的地方不只一個。某些網站的購物車，換了一台電腦購物車內容就不同。代表：內容存在 a 電腦上而非後端，資訊存在瀏覽器內。

一、最古老的方式：Cookie

Cookie 其實是個小型文字檔，會自動帶到 server。簡單地說：就是瀏覽器裡面可以存資訊的地方。不同 domain 會有不同 cookie，為了安全性考量你也拿不到不同 domain 的 cookie。瀏覽器只會幫你把這個 domain 相關的 cookie 帶上去。

可以用 js 將資料寫到 cookie， server端也可以透過 http 的 response 把資料庫寫到 cookie。server 的 http 會有一個 Set-cookie，只要瀏覽器看到這個東西，就會將 cookie 寫進去。所有的 request 都會將瀏覽器的 cookie 自動帶上去，目的是為了幫助瀏覽器辨識身份。辨識身份有時會運用在廣告追蹤。dev-tool => application => storage => cookies (會看到一大堆的 domain)，裡面有些 id 就是來追蹤名單。

舉例 : 我登入到 server ，下次我再登入時，server 要怎麼知道下個人還是我，不是隔壁老王/小明/小美 ? 答：我登入完後，server 會回傳給我一個通行證，所以下次登入我拿著通行證，server 就知道是我登入。而這個通行證就放在 cookie 裡面。所以我每一個發到 server 的 request，瀏覽器都會自動幫他將 cookie 附上去。這樣 server 就會知道這個人是誰。

二、最推薦的儲存方式：local storage

cookie 比較像伺服器與瀏覽器的溝通。伺服器也可以設定 cookie，所以一般在瀏覽器儲存與 server 無關的資訊，會使用 local storage。

目標：想要輸入東西儲存到 local storage 中。當我重新整理他就會將我整理好的文字帶出來。

首先，先確定我們拿的到值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8"> 
    <title>i am title</title>
    <link rel="stylesheet" href="./style.css"/>
    <style>
    </style>
  </head>
<body>
  <div class='app'> 
    <input class='text'/><button class='btn'>儲存</button>
  </div>
  <script>
    document.querySelector('.btn').addEventListener('click', function() {
        const value = document.querySelector('.text').value
        alert(value)
    })

  </script>
</body>
</html>

window.localStorage.setItem('')
window 瀏覽器這個全域，提供給我們 local storage 這個用法。是瀏覽器提供的 api 這種感覺。他的儲存是一個 key value 的儲存，只是這裡的 value 只能是字串。

<body>
  <div class='app'> 
    <input class='text'/><button class='btn'>儲存</button>
  </div>
  <script>
    document.querySelector('.btn').addEventListener('click', function() {
        const value = document.querySelector('.text').value
        window.localStorage.setItem('text', value)
    })

  </script>
</body>

所以當我重新整理，我要再從 local storage 裡面拿出這個值。

<body>
  <div class='app'> 
    <input class='text'/><button class='btn'>儲存</button>
  </div>
  <script>

    const oldValue =window.localStorage.getItem('text') 

    document.querySelector('.text').value = oldValue

    document.querySelector('.btn').addEventListener('click', function() {
        const value = document.querySelector('.text').value
        window.localStorage.setItem('text', value)
    })

  </script>
</body>

重新整理後，資料都還在。某些網站填完表單，回上一頁資料都還在，有可能就是用了 local storage 存東西。可以在 dev-tool => application => storage => local storage 檢視

要注意只能存字串，但我們可以將物件用 JSON.stringify() 變字串一樣可以存進去。拿出來時，再用 JSON.parse()

三、一閃即逝：session storage

非常像 local storage，session 表 a period of time。

用法同 local storage，只是將 localStorage 改成 sessionStorage

<body>
  <div class='app'> 
    <input class='text'/><button class='btn'>儲存</button>
  </div>
  <script>

    const oldValue =window.sessionStorage.getItem('text') 

    document.querySelector('.text').value = oldValue

    document.querySelector('.btn').addEventListener('click', function() {
        const value = document.querySelector('.text').value
        window.sessionStorage.setItem('text', value)
    })

  </script>
</body>

不一樣的地方在，如果新開一個 tab，他的值就不見了。所以不同的分頁，無法共用 sessionStorage，且一旦將這個分頁關閉 sessionStorage 的值就沒有了。但 localStorage 就沒有上面的問題。因為這樣的差異， sessionStorage 應用範圍又更小，通常是存取一些更短暫的資訊。