在浏览器的本地存储中,不同标签页之间默认是不共享存储的。但是,可以使用一些技术手段实现在不同标签页之间共享本地存储的功能。下面是一种常见的解决方法,使用 localStorage
和 window.onstorage
事件来实现在不同标签页之间共享本地存储。
在一个标签页中设置存储值:
localStorage.setItem('sharedValue', 'Hello World!');
在另一个标签页中获取存储值:
const sharedValue = localStorage.getItem('sharedValue');
console.log(sharedValue); // 输出:Hello World!
以上的代码示例演示了如何使用 localStorage
在不同标签页之间共享存储值。
然而,localStorage
不会自动通知其他标签页存储值的变化。为了实现在不同标签页之间实时共享本地存储值,可以使用 window.onstorage
事件监听存储值的变化。
在一个标签页中设置存储值:
localStorage.setItem('sharedValue', 'Hello World!');
在另一个标签页中监听存储值的变化:
window.onstorage = function(event) {
if (event.key === 'sharedValue') {
const sharedValue = event.newValue;
console.log(sharedValue); // 输出:Hello World!
}
};
以上的代码示例演示了如何使用 window.onstorage
事件在不同标签页之间实时共享本地存储值。
需要注意的是,window.onstorage
事件只在同一个域名下的不同标签页之间触发,不同域名的标签页之间是无法共享存储的。