修改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模块对…...
别再只查列表了!Flowable 7.x 待办任务‘状态’字段的实战设计与前端动态渲染
Flowable 7.x 待办任务状态引擎设计与前端动态交互实战 在当今企业级应用开发中,工作流引擎已成为复杂业务流程管理的核心基础设施。作为Activiti的下一代产品,Flowable 7.x在任务状态管理和前后端协同方面提供了更强大的能力。本文将深入探讨如何基于Fl…...
初学Java之范型
范型包装类包装类的定义包装类的作用场景1:我想把数字放进列表里场景2:我想让方法返回"没有结果"场景3:我想用工具类处理数字场景4:泛型方法要求对象类型场景5:我想在同步代码块里用数字作为锁装箱与拆箱定义…...
AI辅助开发新体验:描述需求即可让快马AI生成智能浏览器下载插件
今天想和大家分享一个用AI辅助开发浏览器插件的实战经验。最近在InsCode(快马)平台上尝试开发了一个智能下载插件,整个过程让我深刻体会到AI如何改变传统开发流程。 需求分析 这个插件的核心目标是让下载变得更智能。传统下载工具需要我们手动选择保存位置ÿ…...
从裸机到RTOS:IMX6ULL启动流程与FreeRTOS源码实战解析
1. IMX6ULL裸机启动机制详解 第一次拿到IMX6ULL开发板时,很多人会疑惑:为什么我的程序烧录进去没反应?这得从芯片的启动机制说起。IMX6ULL上电后最先执行的并不是我们写的代码,而是芯片内部ROM中的固化程序。这个ROM代码就像个尽职…...
忍者像素绘卷参数详解:如何通过提示词触发‘火之意志’专属风格权重
忍者像素绘卷参数详解:如何通过提示词触发火之意志专属风格权重 1. 认识忍者像素绘卷 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工具,它将传统忍者文化与16-Bit复古游戏美学完美结合。这款工具特别适合创作具有热血动漫风格的像素艺术作…...
别再死记硬背了!用游戏地图和社交网络,5分钟搞懂BFS和DFS(附C++代码)
游戏化学习:用社交网络和迷宫探险理解BFS与DFS 想象一下你正在玩一款开放世界游戏,地图被战争迷雾笼罩。每次只能看到周围一小块区域,如何高效探索整个地图?或者回忆微信里"朋友的朋友"推荐功能,系统如何找到…...
Pixel Couplet Gen效果展示:乙巳马年像素春联生成惊艳作品集
Pixel Couplet Gen效果展示:乙巳马年像素春联生成惊艳作品集 1. 项目概览 这是一款基于ModelScope大模型驱动的春联生成器。我们创新性地采用夸张的像素游戏风格(Retro Game UI),将传统元素与红白机美学融合,为用户生成独一无二的马年像素春…...
ESP32/ESP8266嵌入式IoT工具库:轻量、可靠、生产就绪
1. 项目概述esp-iot-utils是面向 ESP32 和 ESP8266 平台的轻量级、生产就绪型嵌入式 IoT 工具集。它并非功能堆砌的“大而全”框架,而是以工程师视角提炼出高频、重复、易出错的底层任务——网络通信、结构化数据解析、时间同步、配置持久化与系统状态管理——并封装…...
5B00,5B01,5B02,1700,1701,1702,1704,P07清零软件G3800,TS3480 ,TS3380 ,G3000,G1810,TS9020, TS8020,TS3480
下载地址:链接:https://pan.baidu.com/s/1j7Nwv715wX1JL3qidnGyXA?pwd0000 提取码:0000 常见 佳能打印机 型号: G5080 G6080 G7080 G1810 G2810 G3810 G4810 G1800 G2800 G3800 G4800 G5010 G6010 G7010 G1010 G2010 G3010 G4010 G1000 G2000 G3000 G40…...
(二)人工智能算法之监督学习——线性回归
一、核心定义 线性回归是有监督、回归任务里最基础、最经典的机器学习算法。 核心目标: 用一条直线(一元)/ 超平面(多元),拟合自变量 X 和连续型因变量 Y 之间的线性相关关系,用来做数值预测。 …...
