JavaScript使用localStorage存储数据

### 使用 `localStorage` 存储数据

在 JavaScript 中，`localStorage` 提供了一种简单的方法来保存键值对形式的数据到用户的浏览器中。这些数据即使关闭页面或浏览器后仍然存在。

为了向 `localStorage` 添加项，可以使用 `setItem()` 方法，该方法接受两个参数：一个是作为标识符的字符串类型的键名，另一个是要存储的值，同样也是字符串类型[^3]。

// 将数据存入 localStorage 的例子
function saveDataToLocalStorage(key, value) {
    try {
        // 确保传入的是字符串类型
        const stringifiedValue = JSON.stringify(value);
        window.localStorage.setItem(key, stringifiedValue);
        console.log(`Saved ${key} to localStorage`);
    } catch (e) {
        console.error('Failed saving data:', e);
    }
}

当从 `localStorage` 获取数据时，则应采用 `getItem()` 函数并提供相应的键名：

// 从 localStorage 取回数据的例子
function getDataFromLocalStorage(key) {
    try {
        const retrievedValue = window.localStorage.getItem(key);
        return retrievedValue ? JSON.parse(retrievedValue) : null;
    } catch (e) {
        console.error('Failed retrieving data:', e);
        return null;
    }
}

const myKey = 'example';
saveDataToLocalStorage(myKey, { name: "Alice", age: 28 });
console.log(getDataFromLocalStorage(myKey));

需要注意的是，在考虑安全性的情况下，如果打算通过这种方式处理敏感信息（比如身份验证令牌），应当意识到潜在的安全风险，因为 `localStorage` 容易受到跨站脚本攻击(XSS)[^4]。