朋友的网站有个需求:要从 A 域名迁移到 B 域名。所有内容不变,只是更改域名。这个需求不复杂,理论上改下配置然后 301 即可。但这个网站是纯静态网站,用户数据都存在 localStorage
里,所以他希望能够自动帮用户把数据也迁移到新域名。
我们知道,localStorage
是按照域名存储的,B 网站无法访问 A 网站的 localStorage
。所以我们就需要一些特殊的手段来实现需求。经过一些调研,我们准备使用 postMessage()
来完成这个需求。
大体的方案如下:
首先,增加 migrate.html
页面。这个页面不需要具体的功能,只要侦听 message
事件,并且把 localStorage
发出即可。
<script>
window.addEventListener('message', function (message) {
const { origin, source } = message;
// 验证来源,只接受我们自己的域名发来的请求
if (origin !== 'https://wordleunlimited.me') return;
const local = localStorage.getItem('wordle');
// `source` 是浏览器自动填充的,即调用 `postMessage` 的来源。作为跨域 iframe 里的页面,拿不到外层 window,只能通过这种方式往回传递数据。
source.postMessage({
type: 'migrate',
stored: local,
}, 'https://wordleunlimited.me');
});
</script>
然后,在应用里增加 <iframe>
,因为我用 Vue3,所以这里也用 Vue 组件的方式处理。
<template lang="pug">
migrate-domain(v-if="needMigrate")
</template>
<script setup>
// 我会把迁移的状态持久化,以免反复提示打扰用户
const needMigrate = location.hostname === 'wordleunlimited.me' && !store.state.migrated19;
</script>
<script lang="ts" setup>
import {ref} from "vue";
// 项目启动得早,还在用 vuex
import {useStore} from "vuex";
import {key} from "@/store";
const store = useStore(key);
const migrateIFrame = ref<HTMLIFrameElement>();
// migrate.html 接到请求后,验证来源,然后会把 localStorage 的数据发回。我们用这个函数接收。
window.addEventListener('message', message => {
const { origin, data } = message;
// 同样验证来源
if (origin !== 'https://mywordle.org' && origin !== 'https://mywordgame.com') return;
const { type, stored } = data;
if (type !== 'migrate') return;
if (stored) {
// 迁移数据时,需加入特殊标记,用来标记“已迁移”状态
localStorage.setItem('wordle', stored.replace(/}$/, ', "migrated19": true}'));
// 很奇怪,直接 reload 可能会迁移失败,所以这里稍微等一下
setTimeout(() => {
if (confirm('Data migrated, reload the page?')) {
location.reload();
}
}, 100);
}
});
// iframe 加载完即执行这段 JS,向 iframe 内的页面传递迁移请求
function onLoad() {
const contentWindow = migrateIFrame.value?.contentWindow;
if (contentWindow) {
contentWindow.postMessage('migrate', 'https://mywordle.org');
} else {
console.warn('no content window');
}
}
</script>
<template lang="pug">
iframe(
ref="migrateIFrame"
src="https://mywordle.org/migrate.html"
frameborder="no"
width="0"
height="0"
@load="onLoad"
)
</template>
<style scoped>
iframe {
width: 0;
height: 0;
}
</style>
至此,功能完成。
如此一来,老用户打开网站后,会被跳转到新域名。然后应用 JS 会检查 localStorage
里存储的数据,如果没有迁移过,就会使用 <iframe>
加载老域名下的 migrate.html
。等待目标页面加载完成之后,调用 postMessage()
发送迁移请求。接下里,migrate.html
接到请求后,返回之前存储的数据。新域名储存之后,提示刷新。
主要的坑在于 <iframe>
里的页面无法直接跟跨域页面通信,所以需要父页面先找到子页面,发起请求;然后子页面再把数据回传给父页面。其它方面应该就是一般的 API 调用,以及体验性问题。
希望本文对大家有帮助。如果各位对 postMessage()
或者其它相关技术有问题的话,欢迎留言交流。
本文参与了「SegmentFault 思否写作挑战赛」,欢迎正在阅读的你也加入。
发表回复