Polymer-Redux页面刷新数据丢失，如何实现LocalStorage式持久化？

嘿，这个问题我太懂了！Redux本身是内存级存储，页面一刷新数据就会被清空，用LocalStorage来实现持久化完全符合你的需求，咱们直接修改你的Redux代码就能搞定，一步步来：

1. 先封装LocalStorage读写工具函数 #

先写两个小函数，专门处理Redux状态和LocalStorage的转换，避免重复代码：

// 从LocalStorage加载之前保存的Redux状态
const loadState = () => {
  try {
    const serializedState = localStorage.getItem('polymerReduxState');
    // 没有保存的数据就返回undefined，让Redux使用初始状态
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    console.error('加载LocalStorage数据失败:', err);
    return undefined;
  }
};

// 将当前Redux状态保存到LocalStorage
const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('polymerReduxState', serializedState);
  } catch (err) {
    console.error('保存数据到LocalStorage失败:', err);
  }
};

2. 修改Redux Store的创建逻辑 #

原来你是直接用initialState创建Store，现在改成优先从LocalStorage加载状态，没有的话再用原始初始状态：

// 先尝试加载持久化的状态，不存在则用原始初始值
const persistedState = loadState();
const initialState = persistedState || { 
  user: {"username":"admin", "password":"xxx"} // 这里替换成你原来的初始state
};

// 你的Reducer（根据你实际的业务逻辑调整）
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    // 示例：处理更新用户的action
    case 'UPDATE_USER':
      return { ...state, user: action.payload };
    // 其他action处理逻辑...
    default:
      return state;
  }
};

// 创建Redux Store
const store = Redux.createStore(rootReducer);

3. 订阅Store变化，自动保存到LocalStorage #

Redux提供了subscribe方法，每次State更新都会触发这个回调，我们在这里调用保存函数，实现自动持久化：

// 订阅Store状态变化，每次更新都自动保存到LocalStorage
store.subscribe(() => {
  saveState(store.getState());
});

几个实用小提醒 #

• 如果不需要持久化整个State，可以在saveState里只存需要的部分，比如只存用户信息：saveState({ user: store.getState().user })，节省存储空间
• 注意敏感数据风险：LocalStorage是明文存储的，生产环境不要存密码这类敏感信息，建议只存非敏感的用户标识等数据
• 确保你的State里的所有数据都能被JSON.stringify序列化，如果有函数、Symbol这类特殊值，需要先做转换处理

你的原始导入代码可以直接保留，把上面的JS代码放在对应的<script>标签里即可：

<link rel="import" href="../../bower_components/polymer-redux/polymer-redux.html">
<script src="../../node_modules/redux/dist/redux.min.js"></script>
<script>
// 这里放上面的所有JS代码
</script>

内容的提问来源于stack exchange，提问作者Vipul Solanki