localStorage

迈不过友情╰ 2023-09-27 20:06 108阅读 0赞

**目录**

localStorage与sessionStorage

localStorage的Set与Get

localStorage传递参数

--------------------

## localStorage与sessionStorage ##

现代浏览器提供了一种被称为"Web Storage APIs"（Web 存储接口）的机制，允许在同一浏览器的不同标签页之间共享数据。其中，有两种常见的 Web 存储类型：localStorage 和 localStorage。

两种 Web 存储类型的使用方法非常类似，它们都提供了一个 key-value 的存储方式，并在浏览器上下文中保存数据。localStorage中存储的数据在同一浏览器的所有标签页中都是共享的，而sessionStorage仅在每个标签页内部共享数据。

## localStorage的Set与Get ##

在页面中设置数据：

localStorage.setItem("key", "value");

在其他页面中获取数据：

var data = localStorage.getItem("key");

需要注意的是，localStorage 存储的数据只在同一浏览器中有效，如果用户更换了浏览器或在另一台设备上打开网站，则无法访问之前存储的数据。此外，对于同一域名下的不同子域名，它们之间也不能共享 Web 存储数据，例如，example.com 和 www.example.com 之间不能直接共享 storage 数据。

## localStorage传递参数 ##

在使用 `localStorage.setItem()` 方法存储数据时，需要将 JavaScript 对象类型的数据转换成字符串类型。可以使用 `JSON.stringify()` 方法将 JavaScript 对象序列化为 JSON 字符串，然后再将其存储到 `localStorage` 中。

例如，在下面的示例中，我们将一个包含多个属性的 JavaScript 对象存储到 `localStorage` 中：

var user = {
      name: "John",
      age: 30,
      email: "john@example.com"
    };
    
    // 将 JavaScript 对象转换为 JSON 字符串，并存储到 localStorage 中
    localStorage.setItem("user", JSON.stringify(user));

如果不进行 JSON 转换，将直接将 JavaScript 对象存储到 `localStorage` 中，这样可能会导致一些问题。因为 `localStorage` 只能存储字符串类型的数据，如果存储非字符串类型的数据，则可能无法正确解析或读取这些数据。

在读取存储的数据时，可以使用 `JSON.parse()` 方法将 JSON 字符串转换回 JavaScript 对象类型：

// 从 localStorage 中读取数据，并将其转换为 JavaScript 对象
    var storedUser = JSON.parse(localStorage.getItem("user"));
    
    // 访问对象的属性
    console.log(storedUser.name); // 输出：John
    console.log(storedUser.age); // 输出：30
    console.log(storedUser.email); // 输出：john@example.com

因此，建议在使用 `localStorage` 存储数据时先进行 JSON 转换，以确保数据能够正确存储和读取。