如何在瀏覽器上儲存資料?


Posted by tzutzu858 on 2020-08-10

最古老的方式:Cookie

其實是個小型文字檔會自動帶到 server
可以用 javascript 寫到 Cookie
server 端也可以透過 http 的 response 把資料庫寫到 Cookie
server 的 response 的 header 叫做 set-Cookie,裡面會放一些資訊
只要瀏覽器看到這個資訊,就會把 Cookie 寫進去
所有的 request 都會自動把 Cookie 帶上去,為了讓瀏覽器辨識這個身分
辨識身分有時被用在廣告追蹤或是身分驗證上面

最推薦的儲存方式:local storage

MDN Window.localStorage

<body>
  <div class="app">
    <input class="text" /><button>儲存</button>
  </div>

  <script>
    document.querySelector("button").addEventListener("click",
      function () {
        const value = document.querySelector('.text').value
        window.localStorage.setItem('text', value)
      })
  </script>
</body>

接著我要再拿出 value 的值

const oldValue = window.localStorage.getItem('text')
    document.querySelector('.text').value = oldValue

如此一來,就算頁面重新整理,輸入的值也不會不見
有些網頁很貼心,表單填一填,不小心回到上一頁,再回來,你的內容依然存在

一閃即逝:session storage

和 localStorage 很類似,有點像是一段期間內的感覺
乍看之下用法和 localStorage 一樣,但是新開一個頁面,value 並不會儲存
關掉分頁 value 就沒了,但是 localStorage 關掉再重開, value 還是在










Related Posts

React 基礎:如何在 React 中寫 CSS

React 基礎:如何在 React 中寫 CSS

為什麼我們需要使用 Axios

為什麼我們需要使用 Axios

[第八週] ajax

[第八週] ajax


Comments