LocalStorage如何跨域共享

在 Web 開發(fā)中，我們經常會使用 LocalStorage 來保存一些用戶數(shù)據(jù)，從而實現(xiàn)數(shù)據(jù)的持久化存儲。愛掏網 - it200.com但是，當我們在不同域名（甚至是子域名）之間進行數(shù)據(jù)傳遞時，Local Storage 默認是不支持的。愛掏網 - it200.com本文將介紹如何通過一些技術手段來實現(xiàn) LocalStorage 的跨域共享。愛掏網 - it200.com

在前端開發(fā)中，我們通常會遇到跨域請求的問題。愛掏網 - it200.com跨域原因包括：

• 協(xié)議不同
• 域名不同
• 端口不同

我們知道，JavaScript 腳本的執(zhí)行在同一頁面中是沒有跨域限制的，但是在不同頁面之間存在跨域限制。愛掏網 - it200.com同樣，LocalStorage 也受到同樣的限制。愛掏網 - it200.com

使用 postMessage 跨域

postMessage 是 HTML5 標準中提供的一種跨域傳輸數(shù)據(jù)的解決方案。愛掏網 - it200.com通過 postMessage，我們可以將數(shù)據(jù)傳遞給其他域并得到相應的響應。愛掏網 - it200.com下面是一個例子：

//發(fā)送信息
window.parent.postMessage('我是來自 iframe 的信息', 'http://example.com');

//在目標 window 中設置監(jiān)聽
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return;
  console.log(event.data); //我是來自 iframe 的信息
});

在此基礎上，我們可以通過 postMessage 完成 LocalStorage 數(shù)據(jù)的跨域共享。愛掏網 - it200.com

示例代碼：

//請注意你的域名和端口是否正確
var targetWindow = document.getElementById('target').contentWindow;
targetWindow.postMessage('getLocalStorage', 'http://example.com');

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return;
  if (event.data === 'sendLocalStorage') {
    targetWindow.postMessage(localStorage, 'http://example.com');
  }
  else if (event.data.type === 'setLocalStorage') {
    var key = event.data.key;
    var value = event.data.value;
    localStorage.setItem(key, value);
  }
}, false);

使用 cookies 跨域

雖然 LocalStorage 不支持在跨域環(huán)境下進行數(shù)據(jù)共享，但是 cookies 可以。愛掏網 - it200.com我們可以利用 cookies 在不同域名之間傳遞數(shù)據(jù)，從而實現(xiàn) LocalStorage 數(shù)據(jù)的跨域共享。愛掏網 - it200.com

示例代碼：

//請確保不同域名的 cookie 域名、路徑、過期時間等參數(shù)設置相同
document.cookie = 'key=value; domain=.example.com; path=/; expires=Thu, 18 Dec 2043 12:00:00 UTC';

//獲取 cookie 值
function getCookie(name) {
  var arr;
  var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  if (arr = document.cookie.match(reg)) {
    return arr[2];
  }
  else {
    return null;
  }
}

使用第三方庫

除了使用 postMessage 和 cookies 進行數(shù)據(jù)傳遞之外，我們還可以借助一些第三方庫來實現(xiàn) LocalStorage 數(shù)據(jù)的跨域共享。愛掏網 - it200.com例如，我們可以使用 easyXDM 這個庫來輕松地實現(xiàn)跨域數(shù)據(jù)傳輸。愛掏網 - it200.com

<script src="https://deepinout.com/html/localstorage/easyxdm/easyxdm.min.js"></script>
<script src="http://example.com/storage-server.html"></script>

//storage-server.html
var socket = new easyXDM.Socket({
  remote: 'http://example.com/storage-client.html',
  onMessage: function(message, origin) {
    if (message === 'getLocalStorage') {
      socket.postMessage({ type: 'sendLocalStorage', value: localStorage });
    }
    else if (message.type === 'setLocalStorage') {
      var key = message.key;
      var value = message.value;
      localStorage.setItem(key, value);
    }
  }
});

//storage-client.html
var socket = new easyXDM.Socket({
  remote: 'http://example.com/storage-server.html```js
onMessage: function(message, origin) {
    if (message === 'sendLocalStorage') {
      socket.postMessage({ type: 'getLocalStorage' });
    }
    else if (typeof message === 'object' && message.type === 'sendLocalStorage') {
      for (var key in message.value) {
        if (message.value.hasOwnProperty(key)) {
          localStorage.setItem(key, message.value[key]);
        }
      }
    }
  }
});

結論

在跨域環(huán)境下，實現(xiàn) LocalStorage 數(shù)據(jù)共享是一項常見的需求。愛掏網 - it200.com通過本文中介紹的 postMessage、cookies 和第三方庫等技術手段，我們可以輕松地實現(xiàn) LocalStorage 數(shù)據(jù)的跨域共享，以滿足各種業(yè)務需求。愛掏網 - it200.com