使用 JavaScript 在本地存儲中存儲和檢索對象

HTML Web 存儲 API 提供了一種在用戶瀏覽器中存儲大量數據 (5MB+) 而不影響網站性能的方法。

默認情況下，兩個 Web 存儲對象 - localStorage 和 sessionStorage — 允許我們只存儲字符串鍵值對：

const user = { name: 'Alex', job: 'Software Engineer' };

localStorage.setItem('user', user);

console.log(localStorage.getItem('user')); // [object Object]

如果要存儲整個 JavaScript 對象，首先需要使用 JSON.stringify() 將其序列化為字符串 方法：

const user = { name: 'Alex', job: 'Software Engineer' };

localStorage.setItem('user', JSON.stringify(user));

console.log(localStorage.getItem('user')); 
// {"name":"Alex","job":"Software Engineer"}

從 localStorage 檢索 JavaScript 對象 , 使用 getItem() 方法。您仍然需要使用 JSON.parse() 將 JSON 字符串解析回對象的方法：

// Retrieve the JSON string
const userStr = localStorage.getItem('user');

// Parse JSON string to object
const userObj = JSON.parse(userStr);

// Print object attributes
console.log(userObj.name);  // Alex
console.log(userObj.job);    // Software Engineer

了解更多關於 localStorage 和 sessionStorage 對象，看看這篇文章。