修改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.mfbz.cn/a/253742.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大数据基础-测试过程

一、大数据: 大数据是一个大的数据集合,通过传统的计算技术无法处理。这些数据集的测试需要用各种工具、技术、框架进行处理。大数据涉及数据创建,存储、检索、分析,而且它在数量、多样性、速度都很出色。 二、大数据的测试类型…

【JAVA】CyclicBarrier源码解析以及示例

文章目录 前言CyclicBarrier源码解析以及示例主要成员变量核心方法 应用场景任务分解与合并应用示例 并行计算应用示例 游戏开发应用示例输出结果 数据加载应用示例 并发工具的协同应用示例 CyclicBarrier和CountDownLatch的区别循环性:计数器的变化:用途…

【Spark面试】Spark面试题答案

目录 1、spark的有几种部署模式,每种模式特点?(☆☆☆☆☆) 2、Spark为什么比MapReduce块?(☆☆☆☆☆) 3、简单说一下hadoop和spark的shuffle相同和差异?(☆☆☆☆☆…

【HTML5、CSS3】新增特性总结!

文章目录 23 HTML5 新增特性23.1 语义化标签23.2 多媒体标签23.2.1 视频<video>标签23.2.2 音频<audio>标签 23.3 input属性值23.4 表单属性 24 CSS3 新增特性24.1 属性选择器24.2 结构伪类选择器24.2.1 选择第n个元素24.2.2 常用的6个结构伪类选择器 24.3 伪元素选…

Qt for Android设置安卓程序默认横屏+全屏

我的qt版本是5.14.1&#xff0c;网上查到的方法是&#xff0c;把编译出的build文件夹中的AndroidManifest.xml文件复制出来然后修改&#xff0c;然后把修改后的xml文件加入pro文件&#xff0c;语法为ANDROID_PACKAGE_SOURCE_DIR $$PWD/AndroidManifest.xml&#xff08;具体&am…

Window和Linux设置代理和取消代理(http_proxy)

前言 需要git clone下载项目的时候&#xff0c;一直clone不下来&#xff0c;则需要添加代理 特别注意&#xff0c;在图形界面中设置代理之后&#xff0c;还需要在终端命令行中设置&#xff0c;否则终端无法使用 1. Window 临时设置代理&#xff1a; export http_proxyhttp…

【运维笔记】Hyperf正常情况下Xdebug报错死循环解决办法

问题描述 在使用hyperf进行数据库迁移时&#xff0c;迁移报错&#xff1a; 查看报错信息&#xff0c;错误描述是Xdebug检测到死循环&#xff0c;可是打印的堆栈确实正常堆栈&#xff0c;没看到死循环。 寻求解决 gpt 说的跟没说一样。。 google一下 直接把报错信息粘贴上去…

LV.13 D5 uboot概述及SD卡启动盘制作 学习笔记

一、uboot概述 1.1 开发板启动过程 开发板上电后首先运行SOC内部iROM中固化的代码(BL0)&#xff0c;这段代码先对基本的软硬件环境(时钟等...)进行初始化&#xff0c;然后再检测拨码开关位置获取启动方式&#xff0c;然后再将对应存储器中的uboot搬移到内存&#xff0c;然后跳…

如何提高RAG增强的准确性

在一个典型的RAG应用开发中&#xff0c;必要的步骤为文档加载&#xff0c;文档拆分&#xff0c;向量化&#xff0c;向量存储。然后基于向量存储进行相似性查询&#xff0c;或基于向量距离的查询。这类查询就叫检索&#xff0c;LangChain所提供的对应组件就是检索器。 但这种方…

数据分析为何要学统计学(10)——如何进行比率检验

比率检验是通过样本推测某种事件的总体占比水平。要求事件仅有互斥的两种情况&#xff0c;即&#xff0c;概率分别为p与1-p。 比率检验分单样本和双样本两种情况&#xff0c;以下我们分别介绍。 1. 单样本比率检验 形如这样的问题&#xff1a;“小学生近视比例日益提高&#…

mybatis 批量新增(返回主键),批量查询,批量更新数据

1.配置连接允许批量操作 配置url后面 &allowMultiQueriestrue2.数据层 2.1 mapper // 新增void saveNewStudyPartyDatums(List<StudyDatum> list);// 查询List<Party> getParties(Param("partIds") List<Long> partIds); // 更新void updat…

惯性导航基础知识学习----惯性器件相关

&#x1f308;武汉大学惯性导航课程合集是入门惯导的精品课程~ 作为导航路上的鼠鼠我&#xff0c;要开始学习惯性导航了~ 需要达到的要求是大致了解惯导的原理等~ 后期会陆续更新惯导相关的知识和笔记等~ &#x1f42c; 本blog为 武汉大学惯性导航课程 的记录~ 感谢团队提供的开…

实验八 A/D模数转换(汇编与微机原理)

实验目的&#xff1a; 掌握ADC0809模数转换的工作原理。 掌握用ADC0809来进行电压转换的使用方法。 实验内容&#xff1a; 用模数转换器件ADC0809测量外部输入的模拟电压&#xff0c;将转换结果输出到数码管的最右边两位上显示。 实验原理&#xff1a; 0809A/D转换芯片有8…

查询某个类是在哪个JAR的什么版本开始出现的方法

背景 我们在依赖第三方JAR时&#xff0c;同时也会间接的依赖第三方JAR引用的依赖&#xff0c;而当我们项目中某个依赖的版本与第三方JAR依赖的版本不一致时&#xff0c;可能会导致第三方JAR的在运行时无法找到某些方法或类&#xff0c;从而无法正常使用。 如我正在开发的一个…

SpringIOC之作用域Scope

博主介绍:✌全网粉丝5W+,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌ 博主作品:《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+…

JUC并发编程 06——Synchronized与锁升级

一.Java对象内存布局和对象头 在HotSpot虚拟机里&#xff0c;对象在堆内存中的存储布局可以划分为三个部分&#xff1a;对象头(Header) 、实例数据 (Instance Data) 和 对文填充 (Padding)。 对象内部结构分为&#xff1a;对象头、实例数据、对齐填充&#xff08;保证8个字节的…

DPO讲解

PPO算法的pipeline冗长&#xff0c;涉及模型多&#xff0c;资源消耗大&#xff0c;且训练极其不稳定。DPO是斯坦福团队基于PPO推导出的优化算法&#xff0c;去掉了RW训练和RL环节&#xff0c;只需要加载一个推理模型和一个训练模型&#xff0c;直接在偏好数据上进行训练即可&am…

高通平台开发系列讲解(AI篇)如何让MTCNN运行在SNPE

文章目录 一、使用到的工具1.1、SNPE特点1.2、SNPE特点二、环境配置2.1、Snpe的环境配置2.2、opencv的环境配置2.3、caffe的环境配置三、MTCNN网络组成四、基于SNPE运行MTCNN沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要介绍如何使用高通平台SNPE运行MTCN…

linux驱动的学习 驱动开发初识

1 设备的概念 在学习驱动和其开发之前&#xff0c;首先要知道所谓驱动&#xff0c;其对象就是设备。 1.1 主设备号&次设备号&#xff1a; 在Linux中&#xff0c;各种设备都以文件的形式存在/dev目录下&#xff0c;称为设备文件。最上层的应用程序可以打开&#xff0c;关…

八股文打卡day2——计算机网络(2)

面试题&#xff1a;讲一下三次握手的过程&#xff1f; 我的回答&#xff1a; 1.客户端发送报文段到服务器&#xff0c;主动建立连接。这个报文段中SYN标志位表示&#xff1a;这个报文段是用于连接的&#xff0c;此时SYN标志位设置为1。其中初始序列号字段包含了客户端的初始序…
最新文章