4.16 localStorage 的操控：新增、讀取、更新、刪除

在 practice 資料夾中，建立 localstorage.html 檔案來測試。

localStorage 儲存、更新

以下是將資料儲存在 localStorage 的三種寫法，以 key-value 的方式儲存，例：

localStorage.colorSetting1 = '第一種方式';
localStorage['colorSetting2'] = '第二種方式';
localStorage.setItem('colorSetting3', '第三種方式');

更新的語法，與儲存相同，只要是 key 的名稱有一樣，就會直接視為更新。

示意圖：

localStorage 資料擷取

可透過以下方式取得 localStorage 裡的資料：

var get_color = localStorage.colorSetting2;
// 或
var get_color = localStorage.getItem("colorSetting2");
// 或
var get_color = localStorage['colorSetting2'];

如果 localStorage 裡沒有指定的資料，會回傳 undefined。

localStorage 資料刪除

可透過以下方式來刪除 localStorage 裡的資料：

// 刪除單一項目
localStorage.removeItem("colorSetting2");

// 清空
localStorage.clear();

JSON.stringify() 與 JSON.parse()

若存進去的資料是陣列或物件，需要先將資料字串化後才能存進去，需使用 JSON.stringify()。

將資料取出來後，需要再經過 JSON.parse()，將資料轉回原來的陣列或物件。

例，將物件資料存進 localStorage：

var car = {
  color: "white",
  price: 100
};

var car_str = JSON.stringify(car);
localStorage.setItem("my_car", car_str);

將資料從 localStorage 取出來：

var my_car_str = localStorage.getItem("my_car");
//console.log(my_car_str);
var my_car_obj = JSON.parse(my_car_str);
//console.log(my_car_obj);