美文网首页前端日常踩坑之路
JSON.stringify 日常踩坑

JSON.stringify 日常踩坑

作者: 言蹊灬 | 来源:发表于2019-08-09 17:54 被阅读0次

工作上遇到了 需要将接口返回的json数据存入localStorage中,但是在用JSON.stringify格式化数据时 出现了如下错误

VM211:1 Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at <anonymous>:1:6

在网上查找之后 发现是对返回数据进行处理时 发生了循环引用

解决办法如下:

// 解决循环引用导致的JSON序列化失败的问题

let cache =[];
let str = JSON.stringify(info, function(key, value) {
  if (typeof value ==='object' && value !==null) {
    if (cache.indexOf(value) !== -1) {
      // 移除
      return;
    }
    // 收集所有的值
    cache.push(value);
  }
  return value;
})
cache =null;
localStorage.setItem('info', str)

解决思路就是通过自定义stringify方法,设置一个全局缓存变量,stringify的第二个参数如果是function时,他会传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""


补充更新:npm-flatted 也能解决这个问题
https://www.npmjs.com/package/flatted

相关文章

  • JSON.stringify 日常踩坑

    工作上遇到了 需要将接口返回的json数据存入localStorage中,但是在用JSON.stringify格式...

  • JavaScript 默认值剔除

    方法 验证 结果 有坑JSON.stringify(NaN) => "null"JSON.stringify([u...

  • 日常踩坑

    12.24日 写在18年的尾巴上~ 在React中,如果你render一个元素,给他绑定了一个方法,那么不要直接在...

  • 踩坑日常

    基本推送流程 克隆远程仓库到本地仓库:git clone 仓库地址(ssh/http)本地仓库连接远程仓库:git...

  • 日常bug记录

    想记录日常碰到的bug,坑踩多了,以后应该碰到坑就比较容易处理或者会少踩坑,后面会慢慢记录bug,截图bug以及最...

  • GreenDao日常踩坑

    项目使用到Greendao当做数据库,升级的时候遇到个问题,但新添加int类型字段的时候,数据迁移报错了,查看到是...

  • 日常踩坑-Eureka

    Eureka 原因 Eureka客户端名称不能含有"/"特殊字符,会导致路由无法解析。本项目中名称为adminse...

  • 日常踩坑-SpringBean

    Spring 原因 bean(httpClientUtil)未注入,工具类上错误标注了@Component

  • Android 日常踩坑

    1、Android NDK开发踩坑 踩坑环境 Android Studio 3.4.1,JDK 1.8 1、为什么...

  • 日常踩坑日记

    1、移动端写一个H5页面,使用Jq $.ajax 没有做任何封装,请求接口时 使用CDN方式引入 vConsole...

网友评论

    本文标题:JSON.stringify 日常踩坑

    本文链接:https://www.haomeiwen.com/subject/uitkjctx.html