json.stringify 不处理对象方法

     2023-03-05     39

关键词:

【中文标题】json.stringify 不处理对象方法【英文标题】:json.stringify does not process object methods 【发布时间】:2013-08-07 23:34:36 【问题描述】:

我正在尝试开发一个可以在大多数现代浏览器(Chrome、Firefox、IE 9+、Safari、Opera)中运行的离线 HTML5 应用程序。由于 Safari(尚)不支持 IndexedDB,并且不推荐使用 WebSQL,因此我决定使用 localStorage 来存储用户生成的 JavaScript 对象,并使用JSON.stringify()/JSON.parse() 来放入或取出对象。但是,我发现JSON.stringify() 不处理方法。这是一个带有简单方法的示例对象:

    var myObject = ;
    myObject.foo = 'bar';
    myObject.someFunction = function () /*code in this function*/

如果我将此对象字符串化(然后将其放入 localStorage),将保留的只是myObject.foo,而不是myObject.someFunction()

    //put object into localStorage
    localStorage.setItem('myObject',JSON.stringify(myObject));

    //pull it out of localStorage and set it to myObject
    myObject = localStorage.getItem('myObject');

    //undefined!
    myObject.someFunction

我相信你们中的许多人可能已经知道这个限制/功能/无论您想怎么称呼它。我想出的解决方法是使用方法(myObject = new objectConstructor())创建一个对象,从 localStorage 中提取对象属性,并将它们分配给我创建的新对象。我觉得这是一种迂回的方法,但我是 JavaScript 世界的新手,所以这就是我解决它的方法。所以这是我的大问题:我希望将整个对象(属性+方法)包含在 localStorage 中。我该怎么做呢?如果你能告诉我一个更好的算法,或者我不知道的另一种 JSON 方法,我将不胜感激。

【问题讨论】:

JSON 中不存在函数。请参阅:json.org。 这就是我阅读规范后的想法,但是你有什么办法可以保存这些方法吗?还是我的方式你会怎么做? JSON.stringify function的可能重复 我认为使用构造函数是有意义的。毕竟,为什么要存储方法?数据使对象独一无二,方法只是处理数据的方法。我将添加一个从 JSON 字符串填充对象的方法。 您的“解决方法”正是如何做到这一点。只序列化和存储数据,而不是整个对象。 【参考方案1】:

不按要求修复函数,而是一种在本地存储变量的方法...

<html>
  <head>
    <title>Blank</title>
    <script>
      if(localStorage.g===undefined) localStorage.g=;
      var g=JSON.parse(localStorage.g);
    </script>
  </head>
  <body>
    <input type=button onClick="localStorage.g=JSON.stringify(g, null, '  ')" value="Save">
    <input type=button onClick="g=JSON.parse(localStorage.g)" value="Load">
  </body>
</html>

将所有变量保留在对象 g 中。示例:

  g.arr=[1,2,3];
注意某些类型,例如Date,您需要执行以下操作:
  g.date=new Date(g.date);
每页本地存储:不同的页面有不同的gs

【讨论】:

【参考方案2】:

如果你想对你的对象进行字符串化,但它们有函数,你可以使用JSON.stringify()和第二个参数replacer。为了防止对对象的循环依赖,您可以使用var cache = []

在我们的项目中,我们使用lodash。我们使用以下函数来生成日志。可用于将对象保存到localStorage

var stringifyObj = function(obj) 
  var cache = []
  return JSON.stringify(obj, function(key, value) 
    if (
      _.isString(value) ||
      _.isNumber(value) ||
      _.isBoolean(value)
    ) 
      return value
     else if (_.isError(value)) 
      return value.stack || ''
     else if (_.isPlainObject(value) || _.isArray(value)) 
      if (cache.indexOf(value) !== -1) 
        return
       else 
        // cache each item 
        cache.push(value)
        return value
      
    
  )


// create a circular object
var circularObject = 
circularObject.circularObject = circularObject

// stringify an object
$('body').text(
  stringifyObj(
    
      myBooblean: true,
      myString: 'foo',
      myNumber: 1,
      myArray: [1, 2, 3],
      myObject: ,
      myCircularObject: circularObject,
      myFunction: function () 
    
  )
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

【讨论】:

【参考方案3】:

javascript 中的函数不仅仅是它们的代码。他们也有范围。代码可以字符串化,但作用域不能。

JSON.stringify() 将编码 JSON 支持的值。具有可以是对象、数组、字符串、数字和布尔值的值的对象。其他任何内容都将被忽略或抛出错误。函数不是 JSON 中受支持的实体。 JSON 只处理纯数据,函数不是数据,而是具有更复杂语义的行为。


也就是说,您可以更改 JSON.stringify() 的工作方式。第二个参数是replacer 函数。因此,您可以通过强制对函数进行字符串化来强制执行您想要的行为:

var obj = 
  foo: function() 
    return "I'm a function!";
  
;

var json = JSON.stringify(obj, function(key, value) 
  if (typeof value === 'function') 
    return value.toString();
   else 
    return value;
  
);

console.log(json);
// "foo":"function ()  return \"I'm a function!\" "

但是当你读回来时,你必须评估函数字符串并将结果设置回对象,因为 JSON 不支持函数


JSON 中的所有编码函数都会变得非常复杂。你确定你要这么做吗?可能有更好的方法...

也许您可以改为保存原始数据,并将其从页面上加载的 JS 传递给构造函数。 localStorage 将只保存数据,但加载到页面上的代码将提供操作该数据的方法。

// contrived example...

var MyClass = function(data) 
  this.firstName = data.firstName;
  this.lastName = data.lastName;


MyClass.prototype.getName() 
  return this.firstName + ' ' + this.lastName;


localStorage.peopleData = [
  firstName: 'Bob',
  lastName:  'McDudeFace'
];

var peopleData = localStorage.peopleData;

var bob = new MyClass(peopleData[0]);
bob.getName() // 'Bob McDudeFace'

我们不需要将getName() 方法保存到localStorage。我们只需要将这些数据输入到将提供该方法的构造函数中。

【讨论】:

好的,我明白你在说什么。我只是想看看是否有我遗漏的东西。我最终将只存储数据并将该数据传递给构造函数。感谢您清除它! 优秀的答案!只是想我要补充一点,应该澄清人为的例子localStorage.peopleData = [ firstName: 'Bob', lastName: 'McDudeFace' ];应该是:localStorage.peopleData = JSON.stringify( [ firstName: 'Bob', lastName: 'McDudeFace' ] );也就是说,存储在localStorage中的对象数组需要转换为 JSON 字符串。 当我尝试解析 JSON 时,出现此错误:myMethod is not a function ;为什么?

JSON.stringify 深层对象

】JSON.stringify深层对象【英文标题】:JSON.stringifydeepobjects【发布时间】:2012-12-0110:13:23【问题描述】:我需要一个从任何参数构建JSON有效字符串的函数,但是:通过不添加两次对象来避免递归问题通过截断超过给定深度来避免... 查看详情

为啥 JSON.stringify 不显示作为函数的对象属性?

】为啥JSON.stringify不显示作为函数的对象属性?【英文标题】:Whydoesn\'tJSON.stringifydisplayobjectpropertiesthatarefunctions?为什么JSON.stringify不显示作为函数的对象属性?【发布时间】:2012-05-3013:13:44【问题描述】:为什么JSON.stringify()不... 查看详情

JSON.stringify 的反转?

】JSON.stringify的反转?【英文标题】:ReverseofJSON.stringify?【发布时间】:2012-06-2516:05:12【问题描述】:我正在对像\'foo\':\'bar\'这样的对象进行字符串处理如何将字符串转回对象?【问题讨论】:请注意,foo:\'bar\'不是有效的JSON(... 查看详情

json.stringify方法

用过json的应该都知道,把一个对象通过 stringify 之后提交给后台或者存储在 Storage 里是很常用的手段。但是IE6-7下没有JSON对象,所以要借助 json2.js 来实现。今天我们来简单介绍下 stringify 方法的一... 查看详情

json.stringify,json.parse方法

varobj={name:‘zhangsan‘,age:‘18‘};/**js对象--->JSON字符串*JSON.stringify(js对象)--转化为-->JSON字符串**/console.log(obj);//Object{name:"zhangsan",age:"18"}console.log(JSON.stringify(obj));//{"name":"zhangsan 查看详情

json序列化(stringify)对象时排除某些属性的两种方法

JavaScript的JSON对象本身就带有序列化和反序列化的函数,为parse和stringify,我们一般使用这两个函数将JSON对象持久化。如:varPersion={   username:"Kris",   password:"1234567890"}alert(JSON.stringify(Persion)) &nb 查看详情

stringify字符串转化成json方法

参照原文:http://www.cnblogs.com/damonlan/http://www.jb51.net/article/29893.htm stringify的作用主要是序列化对象(转化为json对象)语法: JSON.stringify(value[,replacer][,space]) 1.value:必选,你输入的对象,比如数组,类等等。 2 查看详情

json.stringify详解

参考技术A当我们使用JSON.stringify()序列化一个值为JSON字符串,只有JSON安全的值才可以通过JSON.stringify()转换为字符串。那么,什么是JSON安全的值?能够有效用JSON形式表示的任何值。非JSON安全的值,例如:undefined、function和symbol... 查看详情

json.stringify(),json.parse(),tojson()方法使用

JSON.stringify():将value(Object,Array,String,Number...)序列化为JSON字符串JSON.parse():将JSON数据解析为js原生值toJSON(),作为JSON.stringify中第二个参数(函数过滤器)补充,理解内部顺序很重要。假设把一个对象传入JSON.stringify()序列化对象的顺序如... 查看详情

qs.stringify、qs.parse、json.stringify的使用和区别

...安装,是一个npm仓库所管理的包。importqsfrom'qs'而qs.stringify()将对象序列化成URL的形式,以&进行拼接。如图qs.parse()将URL解析成对象的形式JSON是正常类型的JSON JSON.stringify同qs.stringify()对比,功能虽然是都是序列化,但是... 查看详情

如何 JSON.stringify 对象数组

】如何JSON.stringify对象数组【英文标题】:HowtoJSON.stringifyanarrayofobjects【发布时间】:2016-05-0700:44:08【问题描述】:我正在尝试JSON.stringify()以下键/值对,其中值是对象数组。varstring=JSON.stringify(onlineUsers:getUsersInRoom(users,room));这是... 查看详情

json.parse()和json.stringify()方法

...在{}外,每个属性名都必须用双引号,否则会抛出异常。stringify()用于从一个对象解析出字符串,如vara 查看详情

如何在不获取空对象的情况下进行 JSON.stringify 和 JSON.parse?

】如何在不获取空对象的情况下进行JSON.stringify和JSON.parse?【英文标题】:HowtoJSON.stringifyandJSON.parsewithoutgettinganemptyobject?【发布时间】:2013-05-0518:35:53【问题描述】:我问这个问题的原因是因为我想为我的对象使用LocalStorage。您... 查看详情

json.stringify()/json.parse()

JSON.stringify()这个方法可以把javascript对象转换成json字符串。JSON.parse()这个方法可以把json字符串转换成javascript对象。【下面来看一下这两个方法的详细解答】json数据中没有变量和结尾的分号,并且数据必须是用双引号引起来的,... 查看详情

js中json.stringify()方法,将js对象转换成字符串,传入服务器

...在向服务器发送数据时一般是字符串。我们可以使用JSON.stringify()方法将JavaScript对象转换为字符串。语法JSON.stringify(value[,replacer[,space]])参数说明:value:必需,要转换的JavaScript值(通常为对象或数组)。replacer:可选。用于转换结... 查看详情

json.stringify()的使用

参考技术A复制粘贴一下JSON.stringify()三个参数的含义:返回值:返回包含JSON文本的字符串。从上面的参数说明中可以看到,第二个参数可以是一个函数或者数组,这给了我们很大的发挥空间。stringify()的第一个和第三个参数都好... 查看详情

通过json.parse(json.stringify(obj))转换的对象中的日期(date)

参考技术AJSON.parse(JSON.stringify())通过此方法确实可以实现一定程度的深拷贝,但是使用此方法,要注意对象中的字段如果是Function或者是Date格式的,深拷贝就会出现问题了。如果对象中有Function或者Date格式的数据,尽量还是不要... 查看详情

json、array基础知识

...定以下是合格的JSON格式以下是不合格的写法思路:用JSON.stringify方法用于将一个值转为字符串。该字符串符合JSON格式,并且可以被JSON.parse方法还原。使用JSON.parse方法将JSON字符串转化成对象。注意:JSON.stringify方法会忽略对象的... 查看详情