【问题标题】:Modify localstorage?修改本地存储?
【发布时间】:2012-09-13 18:06:45
【问题描述】:

我正在使用 simplecartjs 为在线商店提供支持。它将数据存储在本地存储中,如下所示:

{"SCI-1":{"quantity":1,"id":"SCI-1","price":20,"name":"Mattamusta -teippi","size":"Tyhjä"},"SCI-3":{"quantity":1,"id":"SCI-3","price":19,"name":"Mohawk .vaimennusmatto 48 x 39cm"},"SCI-5":{"quantity":2,"id":"SCI-5","price":8,"name":"Car Speaker -hajuste","color":"Green Tea"},"SCI-7":{"quantity":1,"id":"SCI-7","price":50,"name":"Asennuspaketti"},"SCI-9":{"quantity":1,"id":"SCI-9","price":30,"name":"Quartz-kalvot","color":"Yellow","size":"50cm x 30cm"},"SCI-11":{"quantity":1,"id":"SCI-11","price":30,"name":"Quartz-kalvot","color":"True Blue","size":"50cm x 30cm"}}

我想在它关闭之前添加这一行

"SCI-12":{"quantity":1,"id":"SCI-12","price":5,"name":"Toimituskulut"}

但是,产品的数量将取决于用户,等等SCI-12必须随着项目的数量而增长。

EDIT其实不用SCI-1,什么都可以,只要在item后面就行了。

EDIT2 这就是我正在尝试的......但没有运气。

$("#matkahuolto").click(function(){
    var value_object = '"Toimituskulut":{"quantity":1,"id":"Toimituskulut","price":5,"name":"Toimituskulut"}';
    var json_object = JSON.parse(localStorage.your_json); // convert string to object

    json_object["simpleCart_items"] = value_object; // add value

    localStorage.your_json = JSON.stringify(json_object);  // store it again.

    });

    $("#posti").click(function(){
    var json_object = JSON.parse(localStorage.your_json); // convert string to object

    json_object["simpleCart_items"] = value_object; // add value

    localStorage.your_json = JSON.stringify(json_object);  // store it again.

    });

EDIT3 本地存储的屏幕截图。

【问题讨论】:

  • 哦,没注意到。奇怪的是,我希望它显示为另一种产品。
  • 我不确定,但我会在之后说。整个本地存储对我来说是个谜。

标签: javascript local-storage


【解决方案1】:

首先需要了解的是项目是如何存储在localStorage 中的,这基本上就像一个哈希图/字典,因为项目存储在键值对中。

例如,要存储 string localStorage 你会做类似的事情

localStorage["myKey"] = "some value";

要检索值,您只需反向

var myValue = localStorage["myKey"];

接下来要意识到的是,实际上您可以将字符串存储在 localStorage 中,因此如果要存储对象,您需要先将其转换为字符串表示形式。这通常通过将对象转换为JSON 来完成,JSON 是用于将对象表示为字符串的紧凑符号。要将对象转换为 JSON,您只需使用 JSON.stringify 方法,并使用 JSON.parse 方法解析项目

例如将对象转换为 JSON

var someObject = {id: 1, name: 'Test'};

var jsonSomeObject = JSON.stringify(someObject); 
// jsonSomeObject looks like "{"id":1,"name":"test"}"

并从 JSON 中读取对象

someObject = JSON.parse(jsonSomeObject);

所以现在假设你的对象包含适当的数据,你需要做的就是stringify你的对象并使用一些键将它添加到localStorage

var jsonData = JSON.stringify({"SCI-12":{"quantity":1,"id":"SCI-12","price":5,"name":"Toimituskulut"}});

localStorage["aKey"] = jsonData;

当你想稍后访问这些数据时(大概是在返回页面之后)

var mySCI = JSON.parse(localStorage["aKey"])

如果您尝试更新 localStorage 中的特定条目,那么您只需将其读入然后覆盖它,例如

var mySCI = JSON.parse(localStorage["aKey"]);
mySCI.SCI-12.quantity = 2;
localStorage["aKey"] = JSON.stringify(mySCI);

请记住,虽然大多数浏览器都内置了对 JSON 的支持,但有些旧版本不支持,如果这是一个问题,您可以包含 Douglass Crockfords JSON-js 脚本以提供支持。

编辑:

根据您刚刚发布的屏幕截图,您可以看到将值存储在 localStorage 中的键实际上是 simpleCart_items(而不是您的代码中使用的 your_json),并且正在存储的对象有存储在“SCI-1”键下的对象(可能还有“SCI's”下的其他对象)。所以你需要做的是如下所示

 $("#matkahuolto").click(function(){
    var value_object = {quantity: 1, id: 1, name: "someName"} ; 
    var jsonObject = JSON.parse(localStorage["simpleCart_items"]);
    json_object["SCI_1"] = value_object; // add value

 localStorage["simpleCart_items"] = JSON.stringify(json_object);  // store it again.

});

$("#posti").click(function(){
 // convert string to object
 var json_object = JSON.parse(localStorage["simpleCart_items"]); 

json_object["SCI-1"] = value_object; // add value

 localStorage["simpleCart_items"] = JSON.stringify(json_object);  // store it again.

});

【讨论】:

  • 所以,如果我理解正确的话,当我查看本地存储时,它有一个名为simpleCart_items 的键和一个{"SCI-1":{"quantity":1,"id":"SCI-1","price":20,"name":"Valkoinen hiilikuitu -teippi","size":"Tyhjä"}} 的值。所以我必须在修改它之前检索值,并添加我想要的数据?
  • 不完全是,从您提供的访问密钥 your_json 的代码中,在该对象中有一个密钥 simpleCart_items,我编辑了我的答案对此。如果这不是正确的键,您将需要相应地修改您的代码。
  • 您的代码具有正确的值,但本地存储看起来相同。
  • 我不确定我是否理解,您确定您访问的是本地存储中的正确密钥吗?
  • 我想你的意思是你更新了你的问题。无论如何,我根据您的编辑更新了我的 anwser。
【解决方案2】:

LocalStorage 将所有数据存储为文本字符串。所以在它被转换成文本字符串之前修改它是最简单的。

否则需要将json字符串拉成对象,添加属性,再转回字符串存储。

示例代码

var json_object = JSON.parse(localStorage.your_json); // convert string to object
json_object[key] = value_object; // add value
localStorage.your_json = JSON.stringify(json_object);  // store it again.

注意

这就是 indexedDB 的用途。
人们可能想将其视为替代品。

【讨论】:

  • @pure_code 为什么你总是删除你的 cmets?这样做只会让人们感到困惑,因为他们看不到您的对话
猜你喜欢
  • 2022-11-07
  • 1970-01-01
  • 2014-06-20
  • 2014-10-22
  • 2020-01-27
  • 1970-01-01
  • 2018-04-18
  • 1970-01-01
  • 2013-06-08
相关资源
最近更新 更多