最古老的方式:Cookie
其實是個小型文字檔會自動帶到 server
可以用 javascript 寫到 Cookie
server 端也可以透過 http 的 response 把資料庫寫到 Cookie
server 的 response 的 header 叫做 set-Cookie,裡面會放一些資訊
只要瀏覽器看到這個資訊,就會把 Cookie 寫進去
所有的 request 都會自動把 Cookie 帶上去,為了讓瀏覽器辨識這個身分
辨識身分有時被用在廣告追蹤或是身分驗證上面
最推薦的儲存方式:local storage
<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 還是在