PROSAGA码农传奇-存储-在HTML5 localStorage中存储对象

19 条回复

0#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有一个很棒的库可以包含许多解决方案，所以它甚至支持所谓的旧浏览器 <a href="https://github.com/andris9/jStorage" rel="nofollow noreferrer"> jStorage </A> </p> <P> 您可以设置一个对象 </p> <pre> <code> $.jStorage.set(key, value) </code> </pre> <P> 并轻松检索它 </p> <pre> <code> value = $.jStorage.get(key) value = $.jStorage.get(key, "default value") </code> </pre> </DIV>

编辑
1#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 理论上，可以存储具有以下功能的对象： </p> <pre> <code> 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; } </code> </pre> <P> 的<strong> 但是，函数序列化/反序列化是不可靠的，因为 <a href="http://ecma-international.org/ecma-262/5.1/#sec-15.3.4"> 它依赖于实现 </A> 。 </强> </p> </DIV>

编辑
2#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <p>循环遍历localstorage </p> <pre> <code> var retrievedData = localStorage.getItem("MyCart"); retrievedData.forEach(function (item) { console.log(item.itemid); }); </code> </pre> </DIV>

编辑
3#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用localStorage跟踪来自联系人的已接收消息的库的一个小示例： </p> <pre> <code> // This class is supposed to be used to keep a track of received message per contacts. // You have only four methods: // 1 - Tells you if you can use this library or not... function isLocalStorageSupported(){ if(typeof(Storage) !== "undefined" && window['localStorage'] != null ) { return true; } else { return false; } } // 2 - Give the list of contacts, a contact is created when you store the first message function getContacts(){ var result = new Array(); for ( var i = 0, len = localStorage.length; i < len; ++i ) { result.push(localStorage.key(i)); } return result; } // 3 - store a message for a contact function storeMessage(contact, message){ var allMessages; var currentMessages = localStorage.getItem(contact); if(currentMessages == null){ var newList = new Array(); newList.push(message); currentMessages = JSON.stringify(newList); } else { var currentList =JSON.parse(currentMessages); currentList.push(message); currentMessages = JSON.stringify(currentList); } localStorage.setItem(contact, currentMessages); } // 4 - read the messages of a contact function readMessages(contact){ var result = new Array(); var currentMessages = localStorage.getItem(contact); if(currentMessages != null){ result =JSON.parse(currentMessages); } return result; } </code> </pre> </DIV>

编辑
4#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我用另外20行代码制作了另一个简约包装器，允许它像它应该使用它： </p> <pre> <code> localStorage.set('myKey',{a:[1,2,5], b: 'ok'}); localStorage.has('myKey'); // --> true localStorage.get('myKey'); // --> {a:[1,2,5], b: 'ok'} localStorage.keys(); // --> ['myKey'] localStorage.remove('myKey'); </code> </pre> <P> <a href="https://github.com/zevero/simpleWebstorage" rel="nofollow"> https://github.com/zevero/simpleWebstorage </A> </p> </DIV>

编辑
5#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我做了一件不破坏现有存储对象的东西，但创建了一个包装器，这样你就可以做你想做的事。结果是一个普通的对象，没有方法，可以像任何对象一样进行访问。 </p> <P> <a href="https://github.com/rudiedirkx/ObjectStorage" rel="nofollow"> 我做的事情。 </A> </p> <P> 如果你想要1 <code> localStorage </code> 属性是魔术： </p> <pre> <code> var prop = ObjectStorage(localStorage, 'prop'); </code> </pre> <P> 如果你需要几个： </p> <pre> <code> var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']); </code> </pre> <P> 你所做的一切 <code> prop </code> 或者对象的<strong> 内 </强> <code> storage </code> 将自动保存到 <code> localStorage </code> 。你总是玩一个真实的物体，所以你可以做这样的事情： </p> <pre> <code> storage.data.list.push('more data'); storage.another.list.splice(1, 2, {another: 'object'}); </code> </pre> <P> 每一个新的对象的<strong> 内 </强> 将自动跟踪跟踪的对象。 </p> <P> 的<strong> 非常大的缺点： </强> 这取决于 <code> Object.observe() </code> 所以它的浏览器支持非常有限。它似乎不会很快就会出现在Firefox或Edge上。 </p> </DIV>

编辑
6#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我已经修改了一个最高投票的答案。如果不需要，我是单功能而不是2的粉丝。 </p> <pre> <code> Storage.prototype.object = function(key, val) { if ( typeof val === "undefined" ) { var value = this.getItem(key); return value ? JSON.parse(value) : null; } else { this.setItem(key, JSON.stringify(val)); } } localStorage.object("test", {a : 1}); //set value localStorage.object("test"); //get value </code> </pre> <P> 此外，如果未设置任何值，则返回 <code> null </code> 代替 <code> false </code> 。 <code> false </code> 有一些意义， <code> null </code> 才不是。 </p> </DIV>

编辑
7#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 改进@Guria的答案： </p> <pre> <code> Storage.prototype.setObject = function (key, value) { this.setItem(key, JSON.stringify(value)); }; Storage.prototype.getObject = function (key) { var value = this.getItem(key); try { return JSON.parse(value); } catch(err) { console.log("JSON parse failed for lookup of ", key, "\n error was: ", err); return null; } }; </code> </pre> </DIV>

编辑
8#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这里是@danott发布的代码的一些扩展版本 </p> <P> 它也将实施的<strong> 删除 </强> 来自localstorage的价值并展示了如何添加Getter和Setter层而不是 </p> <P> <code> localstorage.setItem(preview, true) </code> </p> <P> 你可以写 </p> <P> <code> config.preview = true </code> </p> <P> 好的，这里是： </p> <pre> <code> var PT=Storage.prototype if (typeof PT._setItem >='u') PT._setItem = PT.setItem; PT.setItem = function(key, value) { if (typeof value >='u')//..ndefined this.removeItem(key) else this._setItem(key, JSON.stringify(value)); } if (typeof PT._getItem >='u') PT._getItem = PT.getItem; PT.getItem = function(key) { var ItemData = this._getItem(key) try { return JSON.parse(ItemData); } catch(e) { return ItemData; } } // Aliases for localStorage.set/getItem get = localStorage.getItem.bind(localStorage) set = localStorage.setItem.bind(localStorage) // Create ConfigWrapperObject var config = {} // Helper to create getter & setter function configCreate(PropToAdd){ Object.defineProperty( config, PropToAdd, { get: function () { return ( get(PropToAdd) ) }, set: function (val) { set(PropToAdd, val ) } }) } //------------------------------ // Usage Part // Create properties configCreate('preview') configCreate('notification') //... // Config Data transfer //set config.preview = true //get config.preview // delete config.preview = undefined </code> </pre> <P> 那么你可以删除别名部分 <code> .bind(...) </code> 。但是我只是把它放进去，因为知道这个真的很好。我花了几个小时才弄清楚为什么这么简单 <code> get = localStorage.getItem; </code> 不工作 </p> </DIV>

编辑
9#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要存储对象，您可以创建一个字母，您可以使用这些字母将字符串中的对象转换为对象（可能没有意义）。例如 </p> <pre> <code> var obj = {a: "lol", b: "A", c: "hello world"}; function saveObj (key){ var j = ""; for(var i in obj){ j += (i+"|"+obj[i]+"~"); } localStorage.setItem(key, j); } // Saving Method function getObj (key){ var j = {}; var k = localStorage.getItem(key).split("~"); for(var l in k){ var m = k[l].split("|"); j[m[0]] = m[1]; } return j; } saveObj("obj"); // undefined getObj("obj"); // {a: "lol", b: "A", c: "hello world"} </code> </pre> <P> 如果你使用你用来分割对象的字母，这种技术会引起一些故障，而且它也是非常实验性的。 </p> </DIV>

编辑
10#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 一个小小的改进 <a href="https://stackoverflow.com/a/2010994/59087"> 变种 </A> ： </p> <pre> <code> Storage.prototype.setObject = function(key, value) { this.setItem(key, JSON.stringify(value)); } Storage.prototype.getObject = function(key) { var value = this.getItem(key); return value && JSON.parse(value); } </code> </pre> <P> 因为 <a href="http://en.wikipedia.org/wiki/Short-circuit_evaluation" rel="noreferrer"> 短路评估 </A> ， <code> getObject() </code> 将 <EM> 立即 </EM> 返回 <code> null </code> 如果 <code> key </code> 不在存储中。它也不会抛出一个 <code> SyntaxError </code> 如果是例外 <code> value </code> 是 <code> "" </code> （空字符串; <code> JSON.parse() </code> 无法处理）。 </p> </DIV>

编辑
11#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> Stringify并不能解决所有问题 </H2> <P> 似乎这里的答案并未涵盖JavaScript中可能的所有类型，因此这里有一些关于如何正确处理它们的简短示例： </p> <pre> <code> //Objects and Arrays: var obj = {key: "value"}; localStorage.object = JSON.stringify(obj); //Will ignore private members obj = JSON.parse(localStorage.object); //Boolean: var bool = false; localStorage.bool = bool; bool = (localStorage.bool === "true"); //Numbers: var num = 42; localStorage.num = num; num = +localStorage.num; //short for "num = parseFloat(localStorage.num);" //Dates: var date = Date.now(); localStorage.date = date; date = new Date(parseInt(localStorage.date)); //Regular expressions: var regex = /^No\.[\d]*$/i; //usage example: "No.42".match(regex); localStorage.regex = regex; var components = localStorage.regex.match("^/(.*)/([a-z]*)$"); regex = new RegExp(components[1], components[2]); //Functions (not recommended): function func(){} localStorage.func = func; eval( localStorage.func ); //recreates the function with the name "func" </code> </pre> <P> 的<strong> 我不推荐 </强> 存储功能因为 <code> eval() </code> 是邪恶可能会导致安全，优化和调试问题。一般来说， <code> eval() </code> 绝不应该在JavaScript代码中使用。 </p> <H2> 私人会员 </H2> <P> 使用的问题 <code> JSON.stringify() </code> 对于存储对象，该函数不能序列化私有成员。这个问题可以通过覆盖来解决 <code> .toString() </code> 方法（在Web存储中存储数据时隐式调用）： </p> <pre> <code> //Object with private and public members: function MyClass(privateContent, publicContent){ var privateMember = privateContent || "defaultPrivateValue"; this.publicMember = publicContent || "defaultPublicValue"; this.toString = function(){ return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}'; }; } MyClass.fromString = function(serialisedString){ var properties = JSON.parse(serialisedString || "{}"); return new MyClass( properties.private, properties.public ); }; //Storing: var obj = new MyClass("invisible", "visible"); localStorage.object = obj; //Loading: obj = MyClass.fromString(localStorage.object); </code> </pre> <H2> 循环参考 </H2> <P> 另一个问题 <code> stringify </code> 无法处理的是循环引用： </p> <pre> <code> var obj = {}; obj["circular"] = obj; localStorage.object = JSON.stringify(obj); //Fails </code> </pre> <P> 在这个例子中， <code> JSON.stringify() </code> 会抛出一个 <code> TypeError </code> <EM> “将循环结构转换为JSON” </EM> 。如果应该支持存储循环引用，则第二个参数为 <code> JSON.stringify() </code> 可能会用到： </p> <pre> <code> var obj = {id: 1, sub: {}}; obj.sub["circular"] = obj; localStorage.object = JSON.stringify( obj, function( key, value) { if( key == 'circular') { return "$ref"+value.id+"$"; } else { return value; } }); </code> </pre> <P> 但是，找到一个有效的存储循环引用的解决方案很大程度上取决于需要解决的任务，恢复这些数据也不是一件容易的事。 </p> <P> 在处理这个问题的SO上已经存在一些问题： <a href="https://stackoverflow.com/questions/10392293/stringify-javascript-object-with-circular-reference/12659424#12659424"> Stringify（转换为JSON）具有循环引用的JavaScript对象 </A> </p> </DIV>

编辑
12#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="http://rhaboo.org" rel="nofollow"> http://rhaboo.org </A> 是一个localStorage糖层，可以让你写这样的东西： </p> <pre> <code> var store = Rhaboo.persistent('Some name'); store.write('count', store.count ? store.count+1 : 1); store.write('somethingfancy', { one: ['man', 'went'], 2: 'mow', went: [ 2, { mow: ['a', 'meadow' ] }, {} ] }); store.somethingfancy.went[1].mow.write(1, 'lawn'); </code> </pre> <P> 它不使用JSON.stringify / parse，因为这对大对象来说是不准确和缓慢的。相反，每个终端值都有自己的localStorage条目。 </p> <P> 你可能猜到我可能和rhaboo有关;-) </p> <P> 阿德里安。 </p> </DIV>

编辑
13#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="http://www.kirupa.com/html5/storing_and_retrieving_an_array_from_local_storage.htm" rel="nofollow"> 看看这个 </A> </p> <P> 假设您有以下数组称为电影： </p> <pre> <code> var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown", "Kill Bill", "Death Proof", "Inglourious Basterds"]; </code> </pre> <P> 使用stringify函数，可以使用以下语法将movies数组转换为字符串： </p> <pre> <code> localStorage.setItem("quentinTarantino", JSON.stringify(movies)); </code> </pre> <P> 请注意，我的数据存储在名为quentinTarantino的密钥下。 </p> <P> 检索您的数据 </p> <pre> <code> var retrievedData = localStorage.getItem("quentinTarantino"); </code> </pre> <P> 要将字符串转换回对象，请使用JSON解析函数： </p> <pre> <code> var movies2 = JSON.parse(retrievedData); </code> </pre> <P> 您可以调用movies2上的所有数组方法 </p> </DIV>

编辑
14#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可能会发现使用这些方便的方法扩展Storage对象很有用： </p> <pre> <code> Storage.prototype.setObject = function(key, value) { this.setItem(key, JSON.stringify(value)); } Storage.prototype.getObject = function(key) { return JSON.parse(this.getItem(key)); } </code> </pre> <P> 这样您就可以获得您真正想要的功能，即使API下面只支持字符串。 </p> </DIV>

编辑
15#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 更好的是你将函数设置为setter和getter 的<strong> localStorage的 </强> 这样你就可以有更好的控制权，而不必重复JSON解析。它甚至会处理你的的<strong> （“”） </强> 空字符串键/数据案例顺利。 </p> <pre> <code> function setItemInStorage(dataKey, data){ localStorage.setItem(dataKey, JSON.stringify(data)); } function getItemFromStorage(dataKey){ var data = localStorage.getItem(dataKey); return data? JSON.parse(data): null ; } setItemInStorage('user', { name:'tony stark' }); getItemFromStorage('user'); /* return {name:'tony stark'} */ </code> </pre> </DIV>

编辑
16#
回复此人
那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用 <a href="https://docs.meteor.com/api/ejson.html" rel="nofollow"> ejson </A> 将对象存储为字符串。 </p> <BLOCKQUOTE> <P> EJSON是JSON的扩展，支持更多类型。它支持所有JSON安全类型，以及： </p> <UL> <LI> 日期（JavaScript <code> Date </code> ） </LI> <LI> 二进制（JavaScript <code> Uint8Array </code> 或者结果 <a href="https://docs.meteor.com/api/ejson.html#ejson_new_binary" rel="nofollow"> EJSON.newBinary </A> ） </LI> <LI> 用户定义的类型（参见 <a href="https://docs.meteor.com/api/ejson.html#ejson_add_type" rel="nofollow"> EJSON.addType </A> 。例如， <a href="https://docs.meteor.com/api/ejson.html#mongo_object_id" rel="nofollow"> Mongo.ObjectID </A> 以这种方式实现。） </LI> </UL> <P> 所有EJSON序列化也都是有效的JSON。例如，具有日期和二进制缓冲区的对象将在EJSON中序列化为： </p> <pre> <code> { "d": {"$date": 1358205756553}, "b": {"$binary": "c3VyZS4="} } </code> </pre> </BLOCKQUOTE> <P> 这是我使用ejson的localStorage包装器 </p> <P> <a href="https://github.com/UziTech/storage.js" rel="nofollow"> https://github.com/UziTech/storage.js </A> </p> <P> 我在包装器中添加了一些类型，包括正则表达式和函数 </p> </DIV>

编辑
17#
回复此人
夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 看着 <a href =“http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html#//apple_ref/doc/uid/TP40007256-CH6-SW1 “rel =”noreferrer“> 苹果 </A> ， <a href="https://developer.mozilla.org/en/DOM/Storage" rel="noreferrer"> Mozilla的 </A> 和 <a href="http://msdn.microsoft.com/en-us/library/cc197050(VS.85).aspx" rel="noreferrer"> 微软 </A> 文档，功能似乎仅限于处理字符串键/值对。 </p> <P> 解决方法可以是 <a href="https://www.w3schools.com/js/js_json_stringify.asp" rel="noreferrer"> <EM> 字符串化 </EM> </A> 您的对象在存储之前，稍后在检索时解析它： </p> <pre> <code> 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)); </code> </pre> </DIV>

编辑

登录后才能参与评论