使用cross-storage跨域存储获取localStorage

使用cross-storage跨域存储

第一步

创建两个vue项目

第二步

添加依赖

pnpm install cross-storage

第三步

编写代码

App1

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import {CrossStorageHub} from 'cross-storage'

// 可信域配置
CrossStorageHub.init([
  {origin: /localhost:5173$/, allow: ['get', 'set', 'del', 'getKeys', 'clear']}
]);



</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  

</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

App2

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { CrossStorageClient } from "cross-storage";
import { ref } from "vue";

// hub 地址
var storage = new CrossStorageClient("http://localhost:5174/hub.html");

const setToken = () => {
  storage.set("token", new Date().getTime());
};

const token = ref("");
const getToken = () => {
  storage.onConnect().then(async function () {
    console.log("Connected to hub!", storage.get("token"));
    token.value = await storage.get("token");
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <button @click="setToken">设置token</button>
    </div>
    <div style="margin-bottom: 20px">
      <button @click="getToken">获取token</button>
    </div>
    <div style="margin-bottom: 20px">{{ token }}</div>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>