JS30-Day15-LocalStorage

By Jason

web storage 種類
web storage 物件分為兩種，雖然都能將資料暫存在當下頁面(頁籤)的空間Storage物件裡，但是資料保存的時間不同。

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

Storage.setItem('key', 'value')：
透過在 setItem() 方法中指定物件屬性的 key 以及 value ，
我們可以在 storage 物件中加入屬性或修改原本的屬性內容。

Storage.getItem('key')：
透過在 getItem() 方法中輸入屬性的 key ，我們可以得到 storage 物件對應的屬性 value 。

Storage.key()：
透過在 key() 方法中輸入屬性的順序位置，我們可以取得storage 物件中該位置的屬性 key ，此順序位置如陣列一樣，由0開始。

Storage.removeItem()：
透過在 removeItem() 方法，我們可以把指定的屬性從storage 物件中移除。

Storage.clear()：
透過 clear() 方法，我們可以直接把storage 中的所有屬性移除。

JSON
雖然我們可以透過 Storage 方法，輕鬆的將資料儲存在本地端，但是實際應用之後，我們會發現我們要儲存的資料 value，全部被轉成字串格式，因此當我們要儲存的資料為一個物件的時候就會產生一個嚴重的問題：















let string = 'testString'
let number = 12345;
let array = ['asd', 123, true];
let object = {test:1};

localStorage.setItem('item', string);
localStorage.setItem('item2', number);
localStorage.setItem('item3', array);
localStorage.setItem('item4', object);

console.log(localStorage.getItem('item'));
console.log(localStorage.getItem('item2'));
console.log(localStorage.getItem('item3'));
console.log(localStorage.getItem('item4'));

alt 属性文本

參考資料: https://ithelp.ithome.com.tw/articles/10195522

Select a repo