如何用jQuery实现div标签实时自动刷新localStorage值

嗨，这个问题其实挺常见的，要实现localStorage值变化时实时更新页面里的div内容、不用刷新整个页面，咱们可以借助浏览器自带的storage事件，再补个小技巧覆盖同页面修改的场景，具体方案如下：

浏览器的storage事件会在同源的其他页面修改localStorage时自动触发，咱们可以给window绑定这个事件监听器，一旦监听到myName这个key的变化，就更新div的内容：

// 先写个复用的更新函数，页面加载和后续更新都能用
function updateNameDisplay() {
  const nameDiv = document.getElementById("name");
  nameDiv.innerHTML = localStorage.getItem('myName') || ''; // 没有值的话显示空字符串
}

// 页面加载完成后先初始化一次内容
updateNameDisplay();

// 监听storage事件
window.addEventListener('storage', function(e) {
  // 只处理我们关心的key：myName
  if (e.key === 'myName') {
    updateNameDisplay();
  }
});

这里的事件参数e还包含了旧值（e.oldValue）和新值（e.newValue），如果需要做额外判断的话可以用上。

刚才的storage事件有个小局限：如果是在当前页面里修改localStorage，这个事件不会触发。所以如果你的页面里有修改myName的逻辑（比如一个输入框保存按钮），咱们可以把修改localStorage和更新页面的逻辑封装在一起：

// 封装一个设置myName的函数，改完就更页面
function setMyName(newName) {
  localStorage.setItem('myName', newName);
  // 立即更新div显示
  updateNameDisplay();
}

// 举个例子：页面里有个保存按钮，点击时调用这个函数
document.getElementById('saveBtn').addEventListener('click', function() {
  const inputVal = document.getElementById('nameInput').value.trim();
  setMyName(inputVal);
});

这样不管是当前页面修改，还是其他同源页面修改myName，div的内容都会实时更新了。

如果想更优雅地监听所有对myName的修改，不用每次都手动调用自定义函数，可以用Proxy包装localStorage的setItem方法，适合需要全局监听的场景：

// 先保存原有的setItem方法
const originalSetItem = localStorage.setItem;

// 用Proxy包装原方法
localStorage.setItem = new Proxy(originalSetItem, {
  apply(target, thisArg, args) {
    const [key, value] = args;
    // 先获取旧值，方便后续触发storage事件用
    const oldValue = localStorage.getItem(key);
    // 调用原方法完成存储
    const result = Reflect.apply(target, thisArg, args);
    
    // 如果是myName的修改，更新页面并手动触发storage事件
    if (key === 'myName') {
      updateNameDisplay();
      window.dispatchEvent(new StorageEvent('storage', {
        key: 'myName',
        oldValue: oldValue,
        newValue: value,
        storageArea: localStorage
      }));
    }
    return result;
  }
});

这个方法比较灵活，但要注意Proxy是ES6的特性，现代浏览器都支持，如果需要兼容旧浏览器的话，还是前面的基础方法更稳妥。

总的来说，结合storage事件和自定义修改函数，就能完美实现你要的“无需刷新页面，实时更新div内容”的需求啦！

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