修改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源码,然后问题解决.

相关推荐

  1. Linux环境FFTW编译 | WSL编译解决

    2023-12-17 19:46:02       33 阅读
  2. npm install解决记录

    2023-12-17 19:46:02       28 阅读
  3. 解决常见的 `npm install`

    2023-12-17 19:46:02       13 阅读
  4. 前端npm打包及解决

    2023-12-17 19:46:02       8 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-17 19:46:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-17 19:46:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-17 19:46:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-17 19:46:02       20 阅读

热门阅读

  1. ISCTF(a)

    ISCTF(a)

    2023-12-17 19:46:02      35 阅读
  2. setState 函数的接收的参数

    2023-12-17 19:46:02       37 阅读
  3. 【Vue原理解析】之模版编译

    2023-12-17 19:46:02       35 阅读
  4. 基于Spring Boot和微信小程序的智能小程序商城

    2023-12-17 19:46:02       45 阅读
  5. 点云拟合方法:三点定圆

    2023-12-17 19:46:02       38 阅读
  6. 代码随想录 474. 一和零

    2023-12-17 19:46:02       37 阅读
  7. LeetCode 每日一题 2023/12/11-2023/12/17

    2023-12-17 19:46:02       43 阅读
  8. Vue基础

    Vue基础

    2023-12-17 19:46:02      34 阅读
  9. 浅谈Web Component

    2023-12-17 19:46:02       31 阅读
  10. 【Linux应用编程笔记】GPIO

    2023-12-17 19:46:02       33 阅读
  11. 网线制作方法及注意事项

    2023-12-17 19:46:02       39 阅读