x-show结合localStorage值不生效：修改值后元素未隐藏如何解决

问题核心：Alpine.js的响应式系统无法自动监听localStorage的变化，直接在x-show中调用localStorage.getItem()，表达式只会在组件初始化时计算一次，后续localStorage变更不会触发DOM更新。

解决方案 #

方法1：用响应式变量同步localStorage #

将localStorage的值存入Alpine的响应式变量，通过变量控制显示隐藏，修改时同步更新变量和localStorage：

<div 
  x-data="{ 
    hi: localStorage.getItem('hi')
  }" 
  x-show="hi == 'hi'"
>
  需要切换显示的内容
</div>

修改值时，先更新响应式变量再同步到localStorage：

// 若在Alpine方法内
this.hi = 'hello';
localStorage.setItem('hi', this.hi);

// 若在外部，可先获取组件实例再更新
document.querySelector('[x-data]')._x_dataStack[0].hi = 'hello';
localStorage.setItem('hi', 'hello');

方法2：监听storage事件实现跨页同步 #

如果需要监听其他标签页对localStorage的修改，可在组件初始化时添加storage事件监听，自动更新响应式变量：

<div 
  x-data="{ 
    hi: localStorage.getItem('hi'),
    init() {
      window.addEventListener('storage', (e) => {
        if (e.key === 'hi') {
          this.hi = e.newValue;
        }
      });
    }
  }" 
  x-show="hi == 'hi'"
>
  需要切换显示的内容
</div>

注意：同一页面内修改localStorage不会触发storage事件，所以同一页面修改时仍需手动更新响应式变量。

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