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

相关文章:

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

现象: 这个问题是直接指向了我使用的第三方库good-storage,这是一个对localStorage/sessionStorage做了简单封装的库,因为项目代码有一个缓存cache.ts有用到 原因分析: 从表象上看是storage对象找不到getItem方法, 但…...

Educational Codeforces Round 160 (Div. 2) A~C(D,E更新中...)

A.Rating Increase(思维) 题意: 给出一个仅包含数字的字符串 s s s,要求将该字符串按以下要求分成左右两部分 a , b a,b a,b: 两个数字均不包含前导 0 0 0 两个数字均大于 0 0 0 b > a b > a b>a 如果…...

【Maven-Helper】利用 Maven-Helper 解决依赖冲突问题

【Maven-Helper】利用 Maven-Helper 解决依赖冲突问题 1)安装 Maven-Helper 插件2)Maven Helper 插件使用方法3)Idea-Maven 可视化依赖树 1)安装 Maven-Helper 插件 这里我们已经安装过了,如果没有安装过,点…...

C# WPF上位机开发(知识产权ip保护)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 上位机软件如果是和硬件模块搭配开发,这个时候大部分上位机基本上都是白送的,不会收取相关的费用。但是,如果上…...

【Jenkins】Pipeline 语法解析(声明式Pipeline)

文章目录 一、Sections1、agent(代理)agent 参数值 2、post3、stages(阶段)4、steps(步骤) 二、Directives 指令1、environment 环境变量2、options 配置选项可用的选项 options 3、parameters 参数可用的参…...

二叉树的最大深度(LeetCode 104)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一:深度优先搜索GolangC 方法二:广度优先搜索GolangC 参考文献 1.问题描述 给定一个二叉树 root ,返回其最大深度。 叉树的「最大深度」是指从根节点到最远叶子节点的最长路径上的节…...

03-数据结构-栈与队列

1.栈 栈和队列是两种操作受限的线性表。如上图所示显示栈的结构 栈:先进后出,入栈(数据进入) 和出栈(数据出去)均在栈顶操作。 常见栈的应用场景包括括号问题的求解,表达式的转换和求值&#…...

功能测试转向自动化测试 。10 年 心路历程——愿测试人不再迷茫

十年测试心路历程: 由于历史原因,大部分测试人员,最开始接触都是纯功能界面测试,随着工作年限,会接触到一些常用测试工具,比如抓包,数据库,linux 等。 我大学学的计算机专业&#…...

VIM ——Vimtutor 个人总结【从入门到精通】

精进 Vim 编辑器技能:从入门到精通 文章目录 精进 Vim 编辑器技能:从入门到精通学习资源[Vim 自带教程中文版 —— vimtutor-CSDN博客](https://blog.csdn.net/qq_40395874/article/details/116047253)[Learn Vimscript the Hard Way (stevelosh.com)](h…...

gitea分支、合并

一、创建分支,推送到远程仓库 git branch dev git checkout dev 或者可以使用合并的命令来完成上述两个步骤: git checkout -b dev在新分支上进行修改、提交代码等操作 接下来,将新分支推送到远程仓库。使用git push命令,并…...

探究 JavaScript 类型检查的利器:typeof 和 instanceof

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…...

VSCode报错插件Error lens

1.点击左侧扩展图标→搜索“error lens”→点击“安装” 2.安装成功页面如下: 3.代码测试一下:书写代码的过程中会出现红色提醒或红色报错 4.另外推荐小伙伴们安装中文插件,学习过程中会比较实用方便,需要安装中文插件的小伙伴请点…...

go-zero开发入门之gateway深入研究1

创建一个 gateway 示例: // main.go package mainimport ("flag""fmt""gateway/middleware""github.com/zeromicro/go-zero/core/conf""github.com/zeromicro/go-zero/gateway" )var configFile flag.String(&…...

【每日一题】反转二叉树的奇数层

文章目录 Tag题目来源题目解读解题思路方法一:广度优先搜索方法二:深度优先搜索 写在最后 Tag 【深度优先搜索】【广度优先搜索】【二叉树】【2023-12-15】 题目来源 2415. 反转二叉树的奇数层 题目解读 反转二叉树奇数层的节点。 解题思路 对于二叉…...

vue 项目配置反向代理导致项目白屏

问题:vue 项目配置反向代理导致项目白屏 一、现象描述 添加反向代理代码后,前端运行白屏 // 设置baseURL,8888是后端端口号,前端请求默认发送到baseURL的地址 var axios require(axios) axios.defaults.baseURL http://local…...

全国县级行政区点位数据,Shp+excel格式

基本信息. 数据名称: 县级行政区点位 数据格式: Shpexcel 数据时间: 2021年 数据几何类型: 点 数据坐标系: WGS84坐标系 数据来源:网络公开数据 数据字段: 序号字段名称字段说明1xzqhdm_1省代码2xzqhmc_1省名称3xzqhdm_2市代码4xzqhmc_2市代…...

文件包含的提升刷题

上一篇文章:一篇文章带你入门文件包含-CSDN博客 已经开始入门了文件包含,那现在开始拔高提升刷题! 1. 拿到题目后啥也没有,所以也不知道要读取啥文件,那就查看源代码。 直接看if的条件就可以知道一定要设置cookie&a…...

入门级银行测试岗位招聘,只需具备这些基本条件!

2023年应该说是超乎意外的寒冷,几乎算是百业凋零。充斥在各个地方各个行业的,更多的是裁员的消息,很少有以往的风风火火的招聘了。无论是金九银十还是在以往的淡季。 谁也不知道这样一个特殊的寒冬还有多久才能过去。但是无论面对什么样的局…...

组里新来了个00后,真卷不过....

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…...

python 命令添加参数

官网 argparse模块可以很容易地编写用户友好的命令行界面。程序定义它需要什么参数,argparse将找出如何从sys.argv中解析这些参数。argparse模块还会自动生成帮助和用法消息。当用户为程序提供无效参数时,该模块也会发出错误。 核心功能 argparse模块对…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...

条件运算符

C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM&#xff09…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...

大数据学习(132)-HIve数据分析

​​​​🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言&#x1f4…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言: 类加载器 1. …...