iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
3
Modern Web

JavaScript 初心者筆記系列 第 24

JavaScript 初心者筆記: localStorage - 將網頁上的資料儲存在瀏覽器

資料如何儲存在瀏覽器?

透過 HTML 中的網頁儲存物件, 可以將網頁中的資料儲存在使用者的瀏覽器當中。
在 HTML5 問世之前,我們只能將小筆的資料儲存在 cookies 當中。在 HTML5 問世之後,網頁儲存有了更加安全且容量更大的本地端儲存空間,除此之外也不會影響到網頁的效能。

網頁儲存物件分為兩種,雖然都能將資料暫存在當下頁面的 Storage 物件裡,但是資料保存的時間不同。

  • window.sessionStorage :放在 sessionStorage 的資料會在頁面關閉時清空,只要該頁面沒被關閉或者有還原 (restore) 該頁面,資料就會保存。
  • window.localStorage : 放在 localStorage 的資料會永久保存,直到被使用者清除。

打開 chrome 開發者工具,選擇 application 頁籤,選取左邊的 localStorage,然後就能看到目前瀏覽器的資料暫存狀況,其顯示的方式是 key 與 value 欄位。(key 的意義可以理解成屬性)

儲存、取出資料的語法 - setItem、getItem

在 JS 中使用 setItem 語法,可以將資料寫進瀏覽器裡。
setItem 的第一個值是 key 的屬性名,第二個值就是相對應的 value。

// 把字串存進 localStorage
var str = 'Tom';
localStorage.setItem('myName',str);

把資料存進瀏覽器後,要取出來的話要用 getItem 語法。

// 把剛剛存進去的字串用 key 名取出來
localStorage.getItem('myName');

如何把使用者鍵入的資料用 localStorge 存起來:範例程式碼

透過 JSON.parse、JSON.stringify 來編譯資料

我們要學習如何將資料在陣列與字串之間互相轉換,因為 localStorage 只能儲存字串資料。

把陣列轉換成字串:

var country = [
  {farmers: Tom}
]
var countryString = JSON.stringify(country);

把字串轉換成陣列:

由於 localStorage 撈出來的資料一律都是字串型別(用 typeof 去查就知道),所以如果我們希望使用從 localStorage 取出來的資料,就必須轉換成陣列

localStorage.setItem('countryItem',countryString);
var getData = localStorage.getItem('countryItem');
var getDataArr = JSON.parse(getData);

上一篇
JavaScript 初心者筆記: 常用事件及相關語法分享
下一篇
JavaScript 初心者筆記: HTML 的自訂資料屬性 - data-*
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言