javascript - sessionStrorage也能使用onstorage事件吗
ringa_lee
ringa_lee 2017-04-10 17:45:23
[JavaScript讨论组]

我试图在封装一个storage模块

做的单页面应用,其中有个业务需求。

假如用户打开两个窗口A和窗口B

当A窗口登陆时,B窗口的状态也是登陆,同样登出也是一样。

我就想到用localStorage的onstorage事件(好吧,其实token就是存在localStorage,已经放弃cookie)

当token变化时,触发onstorage事件,然后问题就是。

localStorage能够触发,有点小bug,IE以及低版本firefox会触发本身的页面之外(这里请教各位,如何让本身的页面不触发?试了好几个方法都不行)

业务需求已满足。

就是sessionStorage的改变,并不会触发onstorage事件(chrome49)

我查了各方资料都表示,sessionStorage也有onstorage事件,可是为什么不触发么,求解?

这是angular的部分代码

      /**
       * watch key storage change,when it change and run watcher
       * @param key       origin key
       * @param watcher   watch function
       */
      var _watchList = {};
      var _hasWatch = false;
      var watch = function () {
        // watch once
        if (_hasWatch) return;
        $window.addEventListener('storage', function (e) {
          angular.forEach(_watchList, function (watcherList, key) {
            var atStorageKey = e.key;
            var originKey = _revertKey(atStorageKey);
            var newVal = e.newValue;
            var oldVal = e.oldValue;

            // not match the key
            if (originKey !== key) return;

            // in the same window,void this bug in IE9+
            // if ($window.$$identifiers === e.srcElement.$$identifiers) return;

            if (newVal === oldVal) return;


            // trigger
            angular.forEach(watcherList, function (watcherObj) {
              if (watcherObj.watcher && angular.isFunction(watcherObj.watcher)) {
                watcherObj.watcher(newVal, oldVal, e);
              }
            })

          });

        }, false);
        _hasWatch = true;
      };

      var watchQueue = function (key, watcher, $scope) {
        watch();
        // push to then queue
        if (!_watchList[key]) {
          _watchList[key] = [];
        }

        // _watchList[key].push(watcher);
        var $$id = _watchList[key].length;

        _watchList[key][0] = {
          $$id: $$id,
          watcher: watcher
        };

        // if is a $scope,the watcher will be destroy with $scope
        if ($scope && $scope.$id && $scope.$parent && angular.isFunction($scope.$on)) {
          $scope.$on('$destroy', function () {
            cancelWatch();
          })
        }

        function cancelWatch() {
          angular.forEach(_watchList, function (watcherList) {
            angular.forEach(watcherList, function (watcher, id) {
              if (id === $$id) {
                watcherList = watcherList.splice(id, 1);
              }
            });
          });
        }

        /**
         * return a function to cancel this watcher
         */
        return cancelWatch;

      };

完整源码我已经放到github上面了。
at-storage

ringa_lee
ringa_lee

ringa_lee

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号