如何更新localStorage中的项目？

Question

我遇到了一个问题，缓存的对象与正确数据不符，所以我想如果我能将最新版本推送到浏览器缓存中，就可以解决我的问题。

如何使用新对象更新您的localStorage？所以，如果我有一个控制器，其中包含已更新的评估。如何将该评估对象推送到localStorage？

- MaxwellLynn

---

localStorage.setItem() 不应该工作？ - felipsmartins

Answer 1

要使用原生JavaScript实现这个功能，您需要像这样进行操作：

localStorage.setItem('itemKey', JSON.stringify(yourObject));
var item = JSON.parse(localStorage.getItem('itemKey'));

在Angular的上下文中，您应该创建一个localStorage服务作为localStorage的包装器，并将其注入到您的服务或控制器中。或者您可以注入$window并直接使用它，如：$window.localStorage

- DerekMT12

Answer 2

针对此重复问题的提问者的特定回答：

LocalStorage只能存储字符串，这就是为什么您在存储之前将对象转换为字符串。要将存储的字符串作为对象进行操作，您可以将其传递给JSON.parse（假设它已经正确格式化为JSON）。然后，要存储修改后的版本，您需要将其转换回字符串。

// Creates JSON-formatted object, converts it to a string and stores the string as "ship"
const ship = { name: "black pearl", captain: "Jack Sparrow" };
const originalStringifiedForStorgage = JSON.stringify(ship);
localStorage.setItem("ship", JSON.stringify(ship));

// Retrieves the string and converts it to a JavaScript object 
const retrievedString = localStorage.getItem("ship");
const parsedObject = JSON.parse(retrievedString);

// Modifies the object, converts it to a string and replaces the existing `ship` in LocalStorage
parsedObject.name = "newName";
const modifiedndstrigifiedForStorage = JSON.stringify(parsedObject);
localStorage.setItem("ship", strigifiedForStorage);

- Cat

Answer 3

如果对象是以JSON格式（不确定Angular是否使用不同的格式）存在，则可以使用setItem()和getItem()方法来更新和检索本地存储项！例如，从以下帖子中获取： http://thejackalofjavascript.com/storing-objects-html5-local-storage/

var me = {name:'myname',age:99,gender:'myGender'};
localStorage.setItem("user",me);
//fetch object
console.log(localStorage.getItem("user")); // will return "[object Object]"

- aquaflamingo

Answer 4

您可以使用功能齐全的Angular模块angular-local-storage

一个AngularJS模块，可让您访问浏览器本地存储并具有cookie回退功能

设置

myApp.controller('MainCtrl', function($scope, localStorageService) {
  //...
  function submit(key, val) {
   return localStorageService.set(key, val);
  }
  //...
});

获取

myApp.controller('MainCtrl', function($scope, localStorageService) {
  //...
  function getItem(key) {
   return localStorageService.get(key);
  }
  //...
});

- Sampath

Answer 5

setItem方法不起作用，它会在localStorage中创建另一个同名的项目。

直接使用以下方法：

localStorage.item = （您想要更改的内容）

- SA Khan

---

localStorage.item 抛出错误：Uncaught TypeError: localStorage.item 不是一个函数。 - Ian Moriarty