修改npm源码解决服务端渲染环境中localstorage报错read properties of undefined (reading getItem)

现象:

这个问题是直接指向了我使用的第三方库good-storage,这是一个对localStorage/sessionStorage做了简单封装的库,因为项目代码有一个缓存cache.ts有用到

原因分析: 从表象上看是storage对象找不到getItem方法,

但实际上是ssr环境中找不到windows.localStorage对象

从这里看看good-storage源码就能分析到这一点:

  var isServer = typeof window === 'undefined';
  var store = {
    /* eslint-disable no-undef */
    version: '1.1.1',
    storage: !isServer ? window.localStorage : null,
    session: {
      storage: !isServer ? window.sessionStorage : null
    }
  };

但这个代码是有漏洞的!它在csr客户端渲染环境中是没有问题的,但是在ssr环境中就一定有问题。

因为有个关键点: 环境中有window对象,并不一定就会有window.localstorage对象!

因为我为了解决document not defined问题,用jsdom给ssr环境做了浏览器环境全局模拟!

这意味window对象是一定存在的!

所以用typeof window === 'undefined'来判断浏览器环境是不准确的

因为此时window对象明显是假的,它底下不可能真正有localstorage属性!

那么就必须使用window对象和window.localStorage对象同时存在的这种双重判断,

才能准确判断出真实的浏览器环境

  var isBrowser = typeof window == "object" && ( window.localStorage != undefined  );

  var store = {
    /* eslint-disable no-undef */
    version: '1.1.1',
    storage: isBrowser ? window.localStorage : undefined,
    session: {
      storage: isBrowser ? window.sessionStorage : undefined
    }
  };

同时在storage对象的get方法上也加上这个判断,这样才能真正生效,避免反序列化失败。

var val = isBrowser ? deserialize(this.storage.getItem(key)) : undefined;

以上修改node_modules\good-storage\dist\storage.js源码,然后问题解决.

相关推荐
与妖为邻1 个月前
房屋水电费记账本:内置的数组数据击按钮不能删除,页面手动添加的可以删除
前端·javascript·css·html·localstorage·房租水电费记账本
与妖为邻2 个月前
html记账本改写:保存数据 localStorage。
前端·javascript·html·localstorage·html记账本
与妖为邻3 个月前
修改了原神4.8版本升级数据表
javascript·css·html·css3·localstorage·原神
Amd7944 个月前
轻松掌握useAsyncData获取异步数据
数据获取·nuxt.js·ssr·服务端渲染·响应式对象·组件函数·异步数据
Chen不旧5 个月前
后台管理台字典localStorage缓存删除
缓存·正则·localstorage
Strong_TAN8 个月前
HarmonyOS | 状态管理(六) | LocalStorage(页面级UI状态存储)
华为·harmonyos·localstorage
kingtopest1 年前
解决nuxt3中vue3生命周期钩子onMounted不执行的问题
vue3·服务端渲染·nuxt3·onmounted
华为云开发者联盟1 年前
掌握HarmonyOS框架的ArkTs如何管理和共享状态数据
arkts·localstorage·harmonyos框架·appstorage