循环引用

在这个答案中，我专注于具有循环引用的仅数据对象（没有函数等），并开发maja和mathheadinclouds提到的想法（我使用了他的测试用例和我的代码短了几倍）。

实际上，我们可以使用带有适当替换符的JSON.stringify-如果源对象包含对某个对象的多个引用，或者包含循环引用，那么我们可以通过特殊路径字符串（类似于JSONPath）来引用它。

//JSON.strify具有circ-ref的对象的替换器函数refReplacer（）{设m=new Map（），v=new Map），init=null；返回函数（字段，值）{让p=m.get（this）+（Array.isArray（this）`[$｛field｝]“：”.“+字段）；让isComplex=value==对象（值）如果（isComplex）m.set（值，p）；让pp=v.get（value）||''；let path=p.replace（/未定义\.\？/，“”）；让val=pp`#REF:$｛pp[0]==“[”？“$”：“$.”｝$｛pp｝“：value；!初始化？（init=value）：（val===init？val=“#REF:$”：0）；if（！pp&&isComplex）v.set（value，path）；返回值；}}// ---------------//测试// ---------------//生成具有重复/循环引用的obj让obj={我：{五十： {v:“lorem”}，R： ｛v:“ipsum”｝},R：{五十： ｛v:“dolor”｝，R：{五十： {v:“坐”}，R： ｛v:“amet”｝}}}obj.R.L.uncle=对象L；obj.R..uncle=对象L；obj.R.L..uncle=obj.R.L；obj.R.R..uncle=obj.R.L；obj.L.L.uncle=对象R；obj.L.R.unncle=对象R；testObject=obj；让json=json.stringify（testObject，refReplacer（），4）；console.log（“测试对象\n”，testObject）；console.log（“带有JSONpath引用的JSON”，JSON）；

使用类似JSONpath的引用解析此类JSON内容：

//使用对象的JSONpath引用解析JSON内容函数parseRefJSON（json）{let objToPath=新映射（）；let pathToObj=新映射（）；let o=JSON.parse（JSON）；让遍历=（父级，字段）=>{让obj=父级；let path=“#REF:$”；if（字段！==未定义）{obj=父[字段]；path=objToPath.get（父）+（Array.isArray（父）`[$｛field｝]`：`$｛field？'。'+字段：''｝`）；}objToPath.set（obj，路径）；pathToObj.set（路径，对象）；let ref=路径目标获取（obj）；如果（ref）父[字段]=ref；for（让f在obj中）if（obj==对象（obj））遍历（obj，f）；}横向（o）；返回o；}// ---------------//测试1// ---------------让json=`{“L”：{“L”：{“v”：“lorem”，“叔叔”：{“L”：{“v”：“dolor”，“叔叔”：“#REF:$.L”},“R”：{“L”：{“v”：“坐”，“叔叔”：“#REF:$.L.L叔叔.L”},“R”：{“v”：“amet”，“叔叔”：“#REF:$.L.L叔叔.L”},“叔叔”：“#REF:$.L”}}},“R”：{“v”：“ipsum”，“叔叔”：“#REF:$.L.L叔叔”}},“R”：“#REF:$.L.L叔叔”}`;let testObject=parseRefJSON（json）；console.log（“测试对象\n”，testObject）；// ---------------//测试2// ---------------console.log（'来自mathheadinclouds的测试答案：'）；let recovered=测试对象；let obj={//原始对象我：{五十： {v:“lorem”}，R： ｛v:“ipsum”｝},R：{五十： ｛v:“dolor”｝，R：{五十： {v:“坐”}，R： ｛v:“amet”｝}}}obj.R.L.uncle=对象L；obj.R..uncle=对象L；obj.R.L..uncle=obj.R.L；obj.R.R..uncle=obj.R.L；obj.L.L.uncle=对象R；obj.L.R.unncle=对象R；[目标L.L.v===恢复L.L.v，目标L.R.v===恢复L.R.v，目标R.L.v===恢复的R.L.v，目标R.R.L.v===恢复的R.R.L.v，obj.R.R.R.v===恢复的R.R.R.v，obj.R.L.包含==obj.L，对象.R.R.uncle==对象L，obj.R.L.包含==obj.R.L，obj.R.R.包含==obj.R.L，对象.L.L.uncle==对象R，obj.L.R.包含==obj.R，recovered.R.L叔叔==已恢复.L，恢复.R.R.叔叔==恢复.L，恢复.R.R.L叔叔==恢复.R.L，恢复.R.R.R.叔叔==恢复.R.L，recovered.L.L叔叔==恢复。R，已恢复.L.R叔叔==已恢复.R].forEach（x=>console.log（'测试通过：'+x））；

要将生成的JSON内容加载/保存到存储中，请使用以下代码：

localStorage.myObject = JSON.stringify(testObject, refReplacer());  // Save
testObject = parseRefJSON(localStorage.myObject);                   // Load

理论上，可以使用以下函数存储对象：

function store (a)
{
  var c = {f: {}, d: {}};
  for (var k in a)
  {
    if (a.hasOwnProperty(k) && typeof a[k] === 'function')
    {
      c.f[k] = encodeURIComponent(a[k]);
    }
  }

  c.d = a;
  var data = JSON.stringify(c);
  window.localStorage.setItem('CODE', data);
}

function restore ()
{
  var data = window.localStorage.getItem('CODE');
  data = JSON.parse(data);
  var b = data.d;

  for (var k in data.f)
  {
    if (data.f.hasOwnProperty(k))
    {
      b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")");
    }
  }

  return b;
}

但是，函数序列化/反序列化不可靠，因为它依赖于实现。

我做了一个东西，它不破坏现有的存储对象，而是创建一个包装器，这样您就可以随心所欲了。结果是一个普通的对象，没有方法，可以像任何对象一样访问。

我做的东西。

如果您希望1个localStorage属性具有魔力：

var prop = ObjectStorage(localStorage, 'prop');

如果您需要几个：

var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);

您所做的一切都将被保存，或者存储中的对象将自动保存到localStorage中。你总是在玩一个真实的物体，所以你可以这样做：

storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});

被跟踪对象中的每个新对象都将被自动跟踪。

最大的缺点是：它依赖于Object.oobserve（），因此它的浏览器支持非常有限。而且它看起来不会很快出现在Firefox或Edge上。

localStorage.setItem('user', JSON.stringify(user));

然后从存储中检索并再次转换为对象：

var user = JSON.parse(localStorage.getItem('user'));

If we need to delete all entries of the store we can simply do:

localStorage.clear();

另一种选择是使用现有的插件。

例如，persisto是一个开源项目，它为localStorage/sessionStorage提供了一个简单的接口，并自动实现表单字段（输入、单选按钮和复选框）的持久性。

（免责声明：我是作者。）

我在读到另一篇文章后发表了这篇文章，这篇文章的标题是“如何在本地存储中存储数组？”。这很好，除了两个线程都没有提供关于如何在localStorage中维护数组的完整答案之外，不过我已经根据两个线程中包含的信息制定了一个解决方案。

因此，如果其他人希望能够在数组中推送/弹出/移动项目，并且他们希望将该数组存储在localStorage或sessionStorage中，那么可以这样做：

Storage.prototype.getArray = function(arrayName) {
  var thisArray = [];
  var fetchArrayObject = this.getItem(arrayName);
  if (typeof fetchArrayObject !== 'undefined') {
    if (fetchArrayObject !== null) { thisArray = JSON.parse(fetchArrayObject); }
  }
  return thisArray;
}

Storage.prototype.pushArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.push(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.popArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.pop();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.shiftArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.shift();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.unshiftArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.unshift(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.deleteArray = function(arrayName) {
  this.removeItem(arrayName);
}

示例用法-在localStorage数组中存储简单字符串：

localStorage.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');

示例用法-在sessionStorage阵列中存储对象：

var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);

var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);

处理数组的常用方法：

.pushArrayItem(arrayName,arrayItem); -> adds an element onto end of named array
.unshiftArrayItem(arrayName,arrayItem); -> adds an element onto front of named array
.popArrayItem(arrayName); -> removes & returns last array element
.shiftArrayItem(arrayName); -> removes & returns first array element
.getArray(arrayName); -> returns entire array
.deleteArray(arrayName); -> removes entire array from storage