reactjs state 多页共享

回到主页

reactjs state 多页共享

· 前端开发,reactjs,dva

在单页应用实现多窗口化，将State数据传输到新窗口。

1.取出state数据


      var value = yield select(state => state);

2.将state序列化后，存入cookie发现超过4KB时无法正常使用，于是采用localStorage。


      //使用cookie，把对象转换成字符串存入cookie,如果超过4KB时，数组存入失败
      $.cookie('currentValue', JSON.stringify(value), { expires: 365 });
      //使用localStorage，把对象转换成字符串存入localStorage
      localStorage.setItem('currentValue', JSON.stringify(value));

3.打开一个新窗口，新窗口从cookie或localStorage获取state，清空值。


      //打开一个新窗口
      window.open('新窗口的路径');
      // 获取cookie里面的值
      var getValue = $.cookie('currentValue');
      // 获取localStorage里的值
      var getValue = localStorage.getItem('currentValue');

      //解析获取的字符串，并赋值给state
      var opts = {};
      opts.initialState = JSON.parse(getValue);
      const app = dva(opts);

      // 清空cookie里面的值
      $.cookie('currentValue', null, { expires: 365 });
      // 清空localStorage里的值
      localStorage.setItem('currentValue', null);

参考资料
cookie： http://blog.csdn.net/elsery/article/details/45586767
localStorage: https://segmentfault.com/a/1190000008144857