当前位置: 首页 > 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模块对…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 ​ 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...

PHP和Node.js哪个更爽?

先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​,覆盖应用全生命周期测试需求,主要提供五大核心能力: ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...

网站指纹识别

网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息&#xff0…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...