当前位置: 首页 > news >正文

修改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源码,然后问题解决.

http://www.lryc.cn/news/263131.html

相关文章:

  • Educational Codeforces Round 160 (Div. 2) A~C(D,E更新中...)
  • 【Maven-Helper】利用 Maven-Helper 解决依赖冲突问题
  • C# WPF上位机开发(知识产权ip保护)
  • 【Jenkins】Pipeline 语法解析(声明式Pipeline)
  • 二叉树的最大深度(LeetCode 104)
  • 03-数据结构-栈与队列
  • 功能测试转向自动化测试 。10 年 心路历程——愿测试人不再迷茫
  • VIM ——Vimtutor 个人总结【从入门到精通】
  • gitea分支、合并
  • 探究 JavaScript 类型检查的利器:typeof 和 instanceof
  • VSCode报错插件Error lens
  • go-zero开发入门之gateway深入研究1
  • 【每日一题】反转二叉树的奇数层
  • vue 项目配置反向代理导致项目白屏
  • 全国县级行政区点位数据,Shp+excel格式
  • 文件包含的提升刷题
  • 入门级银行测试岗位招聘,只需具备这些基本条件!
  • 组里新来了个00后,真卷不过....
  • python 命令添加参数
  • LVS负载均衡器(DR模式)+nginx七层代理+tomcat多实例+php+mysql 实现负载均衡以及动静分离、数据库的调用!!!
  • jmx_exporter安装
  • 怎么给自己的微信公众号留言?
  • Unity中 URP 下的棋盘格Shader
  • 杰发科技AC7840——SPM电源管理之低功耗模式
  • PCL 点云匹配 之NICP(Normal ICP)
  • 华脉智联融合通信一张图
  • Flink系列之:窗口Top-N
  • 【k8s】--insecure-registry详解 ( 访问仓库、https、http)
  • ElementUI,修改el-cascader的默认样式
  • 外卖系统海外版:代码与美食的完美交融