localstorage指定域名

基础概念

localStorage 是 Web Storage API 的一部分，它提供了一种在用户的浏览器中存储键值对数据的方式。与 sessionStorage 不同，localStorage 中的数据没有过期时间，会一直保存在用户的设备上，直到被明确删除。

指定域名

localStorage 是基于域名的。这意味着，一个网站设置的 localStorage 数据只能被同一个域名下的页面访问。如果你想让不同子域名的页面共享 localStorage 数据，可以通过设置相同的 localStorage 名称来实现。

优势

1. 持久性存储：数据不会因为页面刷新或浏览器关闭而丢失。
2. 跨标签页共享：同一个域名下的不同标签页可以共享 localStorage 数据。
3. 存储容量较大：通常 localStorage 的存储容量为 5MB 左右。

类型

localStorage 只有一种类型，即字符串类型。如果你需要存储其他类型的数据（如对象或数组），需要先将其转换为字符串（通常使用 JSON.stringify），然后再存储。读取时再使用 JSON.parse 将其转换回原始类型。

应用场景

1. 用户偏好设置：存储用户的界面偏好设置，如主题颜色、字体大小等。
2. 缓存数据：缓存一些不经常变化的数据，减少网络请求。
3. 会话跟踪：虽然 localStorage 没有过期时间，但可以结合其他机制（如定时检查）来实现会话跟踪。

遇到的问题及解决方法

问题：为什么 localStorage 数据在不同子域名之间无法共享？

原因：localStorage 是基于域名的，不同子域名的页面默认无法访问彼此的 localStorage 数据。

解决方法：可以通过设置相同的 localStorage 名称，并在访问时指定域名来实现共享。例如，在子域名 sub1.example.com 和 sub2.example.com 之间共享数据：

// 在 sub1.example.com 上设置数据
localStorage.setItem('sharedData', JSON.stringify({ key: 'value' }));

// 在 sub2.example.com 上读取数据
const sharedData = JSON.parse(localStorage.getItem('sharedData'));

问题：为什么 localStorage 数据无法读取？

原因：

1. 数据不存在：尝试读取一个不存在的 localStorage 项会返回 null。
2. 跨域问题：不同域名下的页面无法访问彼此的 localStorage 数据。
3. 浏览器限制：某些浏览器可能禁用了 localStorage 功能。

解决方法：

1. 检查数据是否存在：在读取数据前，先检查该键是否存在。

if (localStorage.getItem('key')) {
  const data = localStorage.getItem('key');
  // 处理数据
}

1. 跨域问题：参考上述共享数据的解决方法。
2. 浏览器限制：确保浏览器支持 localStorage 功能，并检查是否有相关的浏览器插件或设置禁用了 localStorage。

参考链接

• MDN Web Docs: localStorage
• Can I use: localStorage