JavaScript 使用 LocalStorage 儲存資料(字串、物件) 示範

網頁該如何儲存資料？我們可以透過 LocalStorage 將字串資料儲存在瀏覽器中(大約 5 MB，依瀏覽器而定)，資料並不會自動被刪除，最簡單的存取示範如下:

    
// 儲存
localStorage.setItem('key', 'value');

// 讀取
let val = localStorage.getItem('key');
if (val === null) {
    console.log('內容不存在');
} else {
    console.log('value:', val);
}

// 刪除
localStorage.removeItem('key');

// 清除全部
localStorage.clear();
    

儲存字串以外的內容

LocalStorage 只能儲存字串，那如果今天有個物件想要儲存該怎麼做？我們可以將物件序列化為 JSON，未來要使用時直接取出並還原(反序列化)即可:

    
    let person = {
        id: 1,
        name: "Ruyut",
        email: "a@ruyut.com"
    };

    // 將物件轉換為 JSON 字串
    let personString = JSON.stringify(person);
    console.log(`personString: ${personString}`);
    // personString: {"id":1,"name":"Ruyut","email":"a@ruyut.com"}

    // 將 JSON 字串儲存至 localStorage
    localStorage.setItem('person', personString);

    // 從 localStorage 讀取 JSON 字串
    let personString2 = localStorage.getItem('person');

    console.log(`personString2: ${personString2}`);
    // 列出所有屬性
    for (let key in person) {
        console.log(`${key}: ${person[key]}`);
    }
    /*
    id: 1
    name: Ruyut
    email: a@ruyut.com
     */
    

註： LocalStorage 的內容可以很輕易的被看到並且修改，請勿儲存密碼等重要資料。

參考資料：
mdn web docs - Window.localStorage