LocalStorage如何跨域共享

在web开发中，我们经常会遇到需要在不同的域名下共享数据的情况。而LocalStorage是HTML5提供的一种本地存储数据的机制，可以很方便地在前端应用中存储和获取数据。但是，在不同的域名下，浏览器默认是不允许访问LocalStorage中的数据的。那么，如何去实现LocalStorage的跨域共享呢？

什么是LocalStorage

LocalStorage是HTML5中新增的一种本地存储机制，它可以让我们在客户端本地存储数据。LocalStorage中存储的数据是以键值对的形式存储的，并且可以长期保存。当我们访问同一个域名下的不同页面时，可以方便地读取和修改已经保存的数据。

LocalStorage具有以下几个特点：

独立于浏览器进程，即使浏览器关闭，数据依然存在。
仅在同一域名下生效。
可存储较大量的数据（通常为5MB）。

使用LocalStorage可以方便地存储一些用户配置或者一些需要在不同页面之间共享的数据。

HTML5中提供了两种本地存储机制，除了LocalStorage之外，还有SessionStorage。SessionStorage也是本地存储技术的一种，与LocalStorage类似，不同之处在于SessionStorage只是会话级别的存储，即当会话结束时数据就会清除。

LocalStorage的跨域问题

LocalStorage的使用虽然非常方便，但是在不同的域名下，由于浏览器的限制，我们不能直接访问LocalStorage中的数据。这是因为LocalStorage存储的数据是保存在本地的文件系统中的，每个域名下存储的位置都是不同的。所以，我们在不同域名下访问LocalStorage所对应的存储位置时，会被浏览器禁止。

为了解决这个问题，我们需要使用一些特殊的技术，在不同的域名之间实现数据的共享。下面介绍几种常见的解决方案。

方案一：iframe嵌套

使用iframe嵌套是一种较为简单的解决方式。我们可以创建一个iframe，并将其src属性设置为存储数据的页面所在的域名下的页面地址，然后在iframe中存储数据。在另一个域名下的页面中，再通过iframe的contentWindow访问到存储在另一个域名下的数据。

下面是一个简单的示例代码：

<!-- 存储数据的页面 -->
<html>
<head>
    <script>
        function saveData() {
            localStorage.setItem('myData', 'Hello World!');
        }
    </script>
</head>
<body onload="saveData()">
</body>
</html>

<!-- 获取数据的页面 -->
<html>
<head>
    <script>
        var iframe = document.createElement('iframe');
        iframe.src = 'http://storage.com/index.html';   // 存储数据的页面地址
        iframe.style.display = 'none';
        document.body.appendChild(iframe);

        function getData() {
            var data = iframe.contentWindow.localStorage.getItem('myData');
            alert(data);
        }
    </script>
</head>
<body onload="getData()">
</body>
</html>

使用iframe嵌套的方式可以解决LocalStorage的跨域问题，但由于iframe嵌套过程中的一些限制，存在一些缺陷，比如页面的结构布局有可能被破坏，样式也可能被修改等问题。

方案二：代理页面

代理页面方式是将localStorage操作交给一个具有目标域名的中转代理页面，通过中转代理页面，我们可以以同一域名下的方式来操作LocalStorage，达到跨域共享数据的目的。

下面是一个简单的示例代码：

<!-- 中转代理页面 -->
<html>
<head>
    <script>
        var localStorageProxy = {
            setItem: function(key, value) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://example.com/saveLocalStorage.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
                xhr.send('key=' + key + '&value=' + value);
            },

            getItem: function(key) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://example.com/getLocalStorage.php?key=' + key, false);
                xhr.send();

                if (xhr.status === 200) {
                    return xhr.responseText;
                } else {
                    return null;
                }
            }
        };

        window.localStorage = localStorageProxy;
    </script>
</head>
<body>
</body>
</html>

在代理页面中，我们实现了一个localStorageProxy对象，重写了其中setItem()和getItem()两个方法。在setItem()方法中，我们使用XMLHttpRequest()对象将数据传输到中转服务器上，而在getItem()方法中，则是通过XMLHttpRequest()对象从中转服务器上获取LocalStorage中对应的数据。最后一行代码将localStorage对象指向了localStorageProxy对象，这样我们就可以使用localStorage对象来存储和获取数据了。

在另一个域名下的页面中，我们只需要引用代理页面即可：

<!-- 另一个域名下的页面 -->
<html>
<head>
    <script src="http://example.com/localStorageProxy.html"></script>
    <script>
        localStorage.setItem('myData', 'Hello World!');
        var data = localStorage.getItem('myData');
        alert(data);
    </script>
</head>
<body>
</body>
</html>

方案三：跨域资源共享

跨域资源共享（CORS）是一种现代的跨域技术，可以让我们在前端直接跨域访问LocalStorage中的数据。不过，在使用CORS时，需要在后台进行一些配置，对于不同的后台语言，其配置方式可能会不同。

以下是一个使用CORS跨域访问LocalStorage的示例代码：

<!-- 存储数据的页面 -->
<html>
<head>
    <script>
        function saveData() {
            localStorage.setItem('myData', 'Hello World!');
        }
    </script>
</head>
<body onload="saveData()">
</body>
</html>

<!-- 通过CORS跨域获取数据 -->
<html>
<head>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://storage.com/getLocalStorage.php?key=myData', true);
        xhr.withCredentials = true;    // 必须设置withCredentials才能访问LocalStorage
        xhr.onload = function() {
            if (xhr.status === 200) {
                alert(xhr.responseText);
            } else {
                alert('Something went wrong!');
            }
        }
        xhr.send();
    </script>
</head>
<body>
</body>
</html>

在跨域访问LocalStorage时，我们需要在后台设置正确的header以允许前端的跨域访问。例如在PHP中，我们可以使用以下的代码：

<?php
header('Access-Control-Allow-Origin: http://example.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');

if ( $_SERVER['REQUEST_METHOD'] === 'POST') {$ key =  $_POST['key'];$ value =  $_POST['value']; setcookie($ key,  $value); echo 'OK'; } else if ($ _SERVER['REQUEST_METHOD'] === 'GET') {
     $key =$ _GET['key'];
    echo  $_COOKIE[$ key];
}
?>

其中Access-Control-Allow-Origin指定了跨域访问的域名，Access-Control-Allow-Credentials设置为true表示允许使用cookie，Access-Control-Allow-Methods指定允许的HTTP请求方式，Access-Control-Allow-Headers指定允许的请求header。在POST请求中，我们将数据存储到cookie中，而在GET请求中，则是从cookie中读取对应的数据。

结论

LocalStorage是一种非常方便的本地存储机制，但是在不同的域名下，会面临不能直接访问LocalStorage中的数据的问题。本文介绍了三种解决方案。使用iframe嵌套是一种较为简单的方式，但具有一定的缺陷；使用代理页面可以实现LocalStorage的跨域共享；而CORS则是一种更为现代的跨域技术，可以直接在前端跨域访问LocalStorage中的数据，但需要在后台进行相应的配置。

开发者可以根据实际情况选择最合适的方案来实现LocalStorage的跨域共享。