Question

我有一个案例，我需要将一个变量从一个模态传递回主屏幕。我已经决定最简洁的方法是将该值存储在localstorage中，以便我可以将其传递回主文件，然后将其显示在主页面上。

有没有办法监听正在更改的localstorage项？我一直在搜索，但只找到了获取和设置变量的信息。

我的项目看起来像这样。

PrevCnt

Answer 1

在窗口对象上有一个存储事件，用于本地存储更改。

MDN local storage api

所以你可以看到变化。但是，如果我是正确的，那只适用于相同的域帧。如果是的话，这是你的选择。

Answer 2

不要将localstorage用于关键功能。在某些浏览器上使用隐私浏览时，localstorage会被完全阻止。

仅将localstorage用于非关键增强功能。

localstorage没有回调，因此您无法在发生变化时监控变更。但是，您可以在页面加载时拉取值，将值存储在执行上下文中，并观察要更改的值。

否则，要做你想做的事就需要使用数据库。

Answer 3

您可以使用全局范围，例如将其定义为函数，它将是一个全局范围。

  var globalVariable={
       x: 'globalval'
    };

或使用......

window.globalvar1='test'  //it will set to global.

这样它将绑定到窗口范围。

Answer 4

设置项目时，请先进行获取并与该值进行比较，如果值改变通知，否则设置。

var length = $('.table').find('tbody').find('tr').length;
    if(localStorage.getItem(length)){
    localStorage.getItem(length)!=length?notifyChange(): 

    }

Answer 5

不要这样做，找到一种依赖注入机制，让你以理智的方式传递变量。用类似于Angular.js的东西做到这一点＆＃39;服务/工厂模式或React商店。

利用这样的机制还可以让您倾听对您存储的内容的更改。事实上，RxJS Observables就是Angular2 +框架的核心。

此外，像couchdb这样的东西可以让你异步地保存这些数据，但仍然没有通过原始localstorage协调全局变量的缺点。

允许不受控制地访问某些全局变量只是要求一个缺陷。

Answer 6

注意：这是一种昂贵且过于复杂的方法，但可满足您对纯localStorage的需求。

如果你必须使用localStorage我能想到的唯一方法是你可以在localStorage中观察/监听变量就像这样

setInterval(function(){
    var modalValue = localStorage.getItem( 'length' );

    if( modalValue ){
        // use the value
        // remove the value when you are done so that this code doesn't run every time
        localStorage.setItem( 'length', null );
    }
}, 100 );

这将每1/10秒检查一次变量，并在设置时运行代码。

你在评论中提到它很复杂，而且它们都是iframe。也许您可以利用messaging api来更好地满足您的需求？

检测localstorage varable是否有变化

6 个答案: