localstorage跨子域名

基础概念

LocalStorage 是 HTML5 提供的一种数据存储方式，它允许网站在用户的浏览器中存储数据，即使在关闭和重新打开浏览器后也能保留。LocalStorage 是基于域名的，这意味着同一域名下的所有页面都可以访问相同的数据。然而，LocalStorage 默认情况下不支持跨子域名共享数据。

类型

LocalStorage 主要分为两种类型：

SessionStorage：数据仅在当前会话期间有效，关闭浏览器后数据会被清除。
LocalStorage：数据在浏览器关闭后仍然保留。

应用场景

LocalStorage 常用于以下场景：

用户偏好设置：存储用户的个性化设置，如主题、字体大小等。
缓存数据：缓存一些不经常变化的数据，减少网络请求。
会话状态：在单页应用（SPA）中存储会话状态。

跨子域名问题及解决方案

问题原因

LocalStorage 默认情况下是基于域名的，不同子域名之间无法直接访问彼此的 LocalStorage 数据。

解决方案

可以通过设置 document.domain 来实现跨子域名的访问。具体步骤如下：

设置 document.domain：将 document.domain 设置为共同的父域名。

// 在子域名 A 的页面中
document.domain = 'example.com';

// 在子域名 B 的页面中
document.domain = 'example.com';

验证跨域访问：在设置 document.domain 后，可以尝试访问另一个子域名的 LocalStorage 数据。

// 在子域名 A 的页面中
localStorage.setItem('key', 'value');

// 在子域名 B 的页面中
console.log(localStorage.getItem('key')); // 输出: value

注意事项

安全性：设置 document.domain 会降低安全性，因为它允许不同子域名之间的脚本访问彼此的数据。因此，这种方法仅适用于信任的子域名之间。
兼容性：document.domain 的设置在某些旧版本的浏览器中可能不兼容。

示例代码

<!-- 子域名 A 的页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Subdomain A</title>
    <script>
        document.domain = 'example.com';
        localStorage.setItem('key', 'value');
    </script>
</head>
<body>
    <h1>Subdomain A</h1>
</body>
</html>

<!-- 子域名 B 的页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Subdomain B</title>
    <script>
        document.domain = 'example.com';
        console.log(localStorage.getItem('key')); // 输出: value
    </script>
</head>
<body>
    <h1>Subdomain B</h1>
</body>
</html>