当前位置: 首页 > 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源码,然后问题解决.

相关文章:

  • Oracle-应用会话集中在RAC集群一个节点问题
  • 使用 ?? 重新定义逻辑以获得更严格、更安全的 JavaScript 默认值
  • Vue中的数据变化监控与响应——深入理解Watchers
  • 数据分析为何要学统计学(10)——如何进行比率检验
  • 【jmeter】接口测试流程
  • 阿里云部署k8s with kubesphere
  • PMP项目管理 - 资源管理
  • Python Django 连接 PostgreSQL 操作实例
  • 【Linux基础命令使用】
  • Elasticsearch的使用总结
  • React Hooks解决了什么问题?
  • 2020-XNUCA babyv8
  • 机器学习算法---聚类
  • Spring Boot中实现订单30分钟自动取消的策略
  • PDF如何转换制作成翻页电子书
  • 「前端」从UglifyJSPlugin强制开启css压缩探究webpack插件运行机制
  • Android 架构优化~MVP 架构改造
  • JS+CSS实现数字滚动
  • JS数组方法汇总
  • JS专题之继承
  • 聚簇索引和非聚簇索引
  • 巧用 TypeScript (一)
  • 设计模式走一遍---观察者模式
  • 问题之ssh中Host key verification failed的解决
  • 正则表达式小结
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • # Kafka_深入探秘者(2):kafka 生产者
  • #Lua:Lua调用C++生成的DLL库
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • $.ajax中的eval及dataType
  • $con= MySQL有关填空题_2015年计算机二级考试《MySQL》提高练习题(10)
  • ( 10 )MySQL中的外键
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (5)STL算法之复制
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (分享)自己整理的一些简单awk实用语句
  • (附源码)springboot 智能停车场系统 毕业设计065415
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (免费领源码)Java#ssm#MySQL 创意商城03663-计算机毕业设计项目选题推荐
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)3D模板阴影原理
  • (轉)JSON.stringify 语法实例讲解
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .Net Core 中间件与过滤器
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)
  • .Net接口调试与案例
  • @Data注解的作用
  • @JSONField或@JsonProperty注解使用
  • [04]Web前端进阶—JS伪数组
  • [14]内置对象
  • [Android]RecyclerView添加HeaderView出现宽度问题
  • [Android]使用Retrofit进行网络请求