什麼是 localStorage?

什麼是 localStorage? --> 在瀏覽器裡面,有各種資料庫,可以讓我「儲存資料」

🎃 Local Storage 可以用來「記錄 user 的行為」–> 就算 user 關機了,資料永遠都會儲存在「Local Storage」裡面

清除「Local Storage」的方式:

🍋 用 JavaScript 清除

🍋 在瀏覽器裡面,清除所有資料

「儲存資料」可以做什麼事情呢?

範例一:最近瀏覽商品

進入博客來 https://www.books.com.tw

🎃 我點擊一本書「操弄」之後,在網頁下方的「最近瀏覽商品」就會出現「“操弄”這本書」

🎃 我再點擊另一本書「免疫解碼」,在「最近瀏覽商品」中,會出現「第一本書 & 第二本書」

💡 「最近瀏覽商品」就是利用了“localStorage”的技巧

🎃 使用開發者工具,進入「Application」頁籤,就可以看到瀏覽器儲存在頁面上的資料

這三個是業界常使用的東西(瀏覽器兼容性都很好):

🍋 Local Storage

🍋 Session Storage

🍋 Cookies

🎃 「Local Storage, Session Storage, Cookies」都是「綁網址」的

  • 例如下圖中的 Cookies,就是透過 JavaScript 存資料到 https://www.books.com.tw 裡面

範例二:最近查閱過的字詞

「萌點」是一個「線上詞典」https://www.moedict.tw/萌

🎃 我查過的記錄,都會儲存在「最近查閱過的字詞」裡面

🎃 在瀏覽器打開新的分頁,再開啟「萌點」,剛剛查過的記錄還是會儲存著

🎃 用開發者工具的 Application 來看 > 進入 Local Storage > 選擇「萌點」

就可以看到,資料都儲存在這裡

🍋 「Key」就類似於「屬性」

🎃 如果在網頁上點擊「清除資料」,在 Local Storage 裡的資料就會被清除掉了