[JS] 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);HTML 的自訂資料屬性 — data-*
在 HTML 標籤中可以放入自創的屬性，這麼做的目的是去綁定 DOM 與資料以及驗證資料。
語法是 data-*，把 * 代換成自訂屬性名稱跟值，例如：data-farmer = "John"、data-dog = "Tom"。
而若要撈出所有 data- 開頭屬性的值，可以用 JS 選取 DOM，然後加上 .dataset 的語法在後面，用 console.log 去查就會得到一組物件。
// HTML
<div class="box" data-farmer="John" data-dog="Tom"></div>//JS
var data = document.querySelector(.box).dataset;
console.log(data);
// {farmer: "John" ,dog: "Tom"}
如果只想撈出其中一個自訂屬性的值，就要在 .dataset 後面多加自訂屬性名（不含 data-）。
var dogName = document.querySelector(.box).dataset.dog
console.log(dogName);
// "Tom"範例程式碼：
dataset + 陣列的運用
在網購時，放入購物車的商品，為什麼可以按個刪除鍵，就輕鬆地從資料庫中移除呢？
我們可以綁定「HTML data-*屬性 的值」與「陣列中的索引值」（讓兩者有一致的編號），就能讓使用者點擊到 DOM 時，因偵測到 data-* 的值，而能連帶地去刪除或新增在陣列中的資料。
如何綁定陣列編號與 data-* 的值
先看範例程式碼：
綁定的方法：函式帶入 e 參數，函式內用變數儲存偵測到的 data-* 值 (e.target.dataset.自訂屬性名)。從陣列撈資料的時候，陣列的索引值帶入「記錄了 data 值的變數」。
push() — 新增陣列資料
在已建立的陣列中加入新資料。
語法：陣列名.push('資料');
splice() — 刪除陣列資料
延續上面所學會的 data-* 技巧，透過綁定陣列索引值並使用 splice 語法，就能達到刪除陣列資料的效果。
語法：陣列名.splice(刪除起始索引值 , 刪除總筆數);
var colors = ["black","red","yellow"]
colors.splice(0,2);
// 再呼叫一次原陣列並用 console 去查
// colors 陣列只剩 "yellow"再來一個範例程式碼：
splice() 的第一個參數（刪除的起始索引值）可以用變數來表示，在範例程式碼中是將 DOM 的 data 屬性值宣告變數並放入 splice 中。
