我找到了一种方法，使它可以处理具有循环引用的对象。

让我们制作一个具有循环引用的对象。

obj = {
    L: {
        L: { v: 'lorem' },
        R: { v: 'ipsum' }
    },
    R: {
        L: { v: 'dolor' },
        R: {
            L: { v: 'sit' },
            R: { v: 'amet' }
        }
    }
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;

由于循环引用，我们不能在这里执行JSON.stringify。

LOCALSTORAGE.CYCLICJSON与普通JSON一样具有.stringify和.parse，但可以处理具有循环引用的对象。（“Works”表示解析（stringify（obj））和obj深度相等，并且具有相同的“内部等式”集合）

但我们可以使用快捷方式：

LOCALSTORAGE.setObject('latinUncles', obj)
recovered = LOCALSTORAGE.getObject('latinUncles')

然后，recovered将与obj“相同”，在以下意义上：

[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
]

以下是LOCALSTORAGE的实现

LOCALSTORAGE=（函数）{“使用严格”；var ignore=[Boolean，Date，Number，RegExp，String]；函数原语（项）{if（项目类型==“对象”）{if（item==null）｛return true；｝对于（var i=0；i＜ignore.length；i++）{if（iteminstanceofignore[i]）｛return true；｝}return false；}其他{返回true；}}功能婴儿（价值）{return Array.isArray（value）？[] : {};}函数decycleIntoForest（对象，替换符）{if（typeof replacer！==“函数”）{replacer=函数（x）｛return x；｝}object=替换器（对象）；if（原语（对象））返回对象；var objects=[对象]；var森林=[婴儿（对象）]；var bucket=new WeakMap（）；//桶=对象的倒数bucket.set（对象，0）；函数addToBucket（obj）{var result=objects.length；objects.push（obj）；bucket.set（对象，结果）；返回结果；}函数isInBucket（obj）｛return bucket.has（obj）；｝函数processNode（源，目标）{Object.keys（源）.forEach（函数（键）{var value=replacer（源[key]）；if（基元（值））{target[key]=｛value:value｝；}其他{var ptr；if（isInBucket（值））{ptr=bucket.get（值）；}其他{ptr=addToBucket（值）；var newTree=婴儿（值）；forest.push（newTree）；processNode（value，newTree）；}target[key]={pointer:ptr}；}});}processNode（对象，林[0]）；回归森林；};函数deForestInoCycle（林）{var对象=[]；var objectRequested=[]；var todo=[]；函数processTree（idx）{if（对象中的idx）返回对象[idx]；if（objectRequested[idx]）返回null；objectRequested[idx]=true；var树=森林[idx]；var node=Array.isArray（树）？[] : {};for（树中的var键）{var o=树[key]；如果（o中的“指针”）{var ptr=o.pointer；var value=processTree（ptr）；if（值==空）{todo推送({node:节点，key：键，idx:ptr});}其他{node[key]=值；}}其他{if（o中的“值”）{节点[key]=o.value；}其他{抛出新错误（“意外”）}}}objects[idx]=节点；返回节点；}var result=processTree（0）；对于（var i=0；i<todo.length；i++）{var项=todo[i]；item.node[item.key]=对象[item.idx]；}返回结果；};var控制台={日志：函数（x）{var the=document.getElementById（'''）；.textContent=.textContent+'\n'+x；},分隔符：函数（）{var the=document.getElementById（'''）；.textContent=.textContent+'\n***************************************'；}}函数logCyclicObjectToConsole（根）{var cycleFree=decycleIntoForest（根）；var showed=cycleFree.map（函数（树，idx）{return false；});var缩进增量=4；函数showItem（nodeSlot、indent、label）{var leadingSpaces=''.repeat（缩进）；var leadingSpacesPlus=“”.repeat（缩进+缩进增量）；if（显示[nodeSlot]）{console.log（leadingSpaces+label+'…请参见上文（object#'+nodeSlot+'）'）；}其他{console.log（leadingSpaces+label+'object#'+nodeSlot）；var tree=cycleFree[nodeSlot]；show[nodeSlot]=true；Object.keys（树）.forEach（函数（键）{var entry=tree[key]；if（条目中的“值”）{console.log（leadingSpacesPlus+key+“：”+entry.value）；}其他{if（条目中的“指针”）{showItem（entry.pointer，indent+indentIncrement，key）；}}});}}console.demiter（）；showItem（0，0，'root'）；};函数字符串（obj）{return JSON.stringify（decycleIntoForest（obj））；}函数解析（str）{return deForestInoCycle（JSON.parse（str））；}var CYLICJSON={decycleIntoForest：decycleIntoForest，deForestInoCycle:deForestIntoCycle，logCyclicObjectToConsole:logCyclicObject到控制台，丝状：丝状，解析：解析}函数setObject（名称，对象）{var str=字符串（对象）；localStorage.setItem（名称，str）；}函数getObject（名称）{var str=localStorage.getItem（名称）；如果（str==null）返回null；返回解析（str）；}返回{CYCLICJSON:CYCLICJSON，setObject：setObject，getObject:getObject}})();目标={我：{五十： {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；//LOCALSTORAGE.setObject（“latinUncles”，对象）//recovered=LOCALSTORAGE.getObject（'latinUncles'）//fiddle内部不提供localStorage）：本地存储.CYCLICJSON.logCyclicObjectToConsole（obj）putIntoLS=本地存储.CYCLICJSON.stringify（obj）；recovered=本地存储.CYCLICJSON.parse（putIntoLS）；LOCALSTORAGE.CYCLICJSON.logCyclicObjectToConsole（已恢复）；var the=document.getElementById（'''）；.textContent=.textContent+'\n\n'+JSON.stringify([目标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，

您可能会发现使用以下方便的方法扩展Storage对象很有用：

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
}

通过这种方式，您可以获得真正想要的功能，即使API下面只支持字符串。

再次查看Apple、Mozilla和Mozilla文档，功能似乎仅限于处理字符串键/值对。

解决方法是在存储对象之前将其字符串化，然后在检索对象时对其进行解析：

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

循环引用

在这个答案中，我专注于具有循环引用的仅数据对象（没有函数等），并开发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

这个问题已经从仅JavaScript的角度得到了充分的回答，其他人已经注意到localStorage.getItem和localStorage.setItem都没有对象的概念，它们只处理字符串和字符串。这个答案提供了一个TypeScript友好的解决方案，它结合了其他人在纯JavaScript解决方案中的建议。

TypeScript 4.2.3

Storage.prototype.setObject = function (key: string, value: unknown) {
  this.setItem(key, JSON.stringify(value));
};

Storage.prototype.getObject = function (key: string) {
  const value = this.getItem(key);
  if (!value) {
    return null;
  }

  return JSON.parse(value);
};

declare global {
  interface Storage {
    setObject: (key: string, value: unknown) => void;
    getObject: (key: string) => unknown;
  }
}

用法

localStorage.setObject('ages', [23, 18, 33, 22, 58]);
localStorage.getObject('ages');

解释

我们在Storage原型上声明setObject和getObject函数，localStorage就是这种类型的实例。除了getObject中的空处理之外，我们真的没有什么特别需要注意的。由于getItem可以返回null，我们必须提前退出，因为对null值调用JSON.parse将引发运行时异常。

在存储原型上声明函数之后，我们将其类型定义包含在全局命名空间中的存储类型上。

注意：如果我们用箭头函数定义这些函数，我们需要假设我们调用的存储对象总是localStorage，这可能不是真的。例如，上述代码还将向sessionStorage添加setObject和getObject支持。

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

我做的东西。

如果您希望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上。