localStorage：以不同方式存储对象与简单数据类型？答案

【问题标题】：localStorage: Storing Objects vs Simple Data Types in different ways?localStorage：以不同方式存储对象与简单数据类型？
【发布时间】：2014-06-06 17:54:30
【问题描述】：

我已经看到了使用 JSON.stringify 和 JSON.parse 从 HTML5 localStorage 存储和检索值/对象的方法。 它可以工作，但它会将所有内容“字符串化” - 包括字符串、数字等。我想改进它。我想避免“字符串化”不是对象的简单数据类型。我在下面有一个方法，我用它来确定参数是否是一个对象，如果它是一个对象，则 JSON.stringify 它。

lsSet: function(key, value) {

  ((Object.prototype.toString.call(value) === '[object Object]')) 
    ? localStorage.setItem(key,JSON.stringify(value)) 
    : localStorage.setItem(key,value);
  return (localStorage.getItem(key)) ? true : false;
},

有没有一种好方法可以识别您正在检索的 localStorage 字符串是否是字符串化对象？我正在考虑检查字符串是否以 { 开头并以 } 结尾，但似乎必须有更好的方法。下面是我当前的 localStorage get 方法，但是在尝试 JSON.parse 字符串等简单数据类型时会抛出错误。

lsGet: function(key) {
    return JSON.parse(localStorage.getItem(key));
},

典型的控制台错误是由于 JSON.parse：

Uncaught SyntaxError: Unexpected token E

有什么想法吗？突然想到一个想法，也许只是尝试/捕捉？

var value;
try {
  value = JSON.parse(localStorage.getItem(key));
} catch(err) {
  value = localStorage.getItem(key);
}
return value;

编辑：请注意，我正在处理很多不同的数据，我真的不想担心我正在设置/获取的数据类型。因此创建了标准的 lsSet/lsGet 方法。在我的应用程序中，数据存储在 PHP Session、JavaScript 对象和 localStorage 中——有点混合。

【问题讨论】：

您不应该知道您在本地存储中放入了什么吗？当您的应用程序放在那里时，为什么您不知道您正在检索什么？
你为什么不使用typeof
发生错误时请提供localStorage.getItem(key)的值，以便我们检查解析时出现错误的原因。
@thatidiotguy - 很多数据类型。我不想担心我设置的类型。因此，一个标准的 lsGet/lsSet
@sabithpocker - typeof 不能用于来自 localStorage 的数据。

标签： javascript html

【解决方案1】：

没有办法知道您检索的字符串是序列化对象还是纯字符串，除非基于您自己的规则。字符串"null"、"34"、"[1,2,3]" 都可以是有效字符串或有效 JSON，除非您对预期内容有所了解，否则无法确定。

所以我建议：

对所有内容进行序列化和反序列化。这在性能方面应该不会太差，除非您以非常高的频率执行此操作（在这种情况下，localStorage 可能是错误的选择）。

或

为您的序列化字符串添加自定义“标题”，例如"JSON:{...}"。然后，当您检索字符串时，检查标题并进行相应处理。

【讨论】：

"对所有内容进行序列化和反序列化。" - 似乎是最好的建议。这是您使用 localStorage get/set 看到的最常见的方法吗？
我想是的，如果您正在处理一堆任意数据。 IMO 在这种情况下，您需要平衡（反）序列化的潜在性能影响与以不同方式处理不同数据类型所增加的复杂性；除非性能对您来说是一个大问题，否则简单会胜出。在一个地方本地化 get/set 意味着如果需要，您可以随时升级到复杂、性能更高的选项。

【解决方案2】：

lsSet: function(key, value) {
  switch(typeof value){
      case "string" : localStorage.setItem(key,'"' + value + '"'); break;
      case "number" : localStorage.setItem(key,value); break;
      case "object" : localStorage.setItem(key,JSON.stringify(value)); break;
  }
  return (localStorage.getItem(key)) ? true : false;
},

只是一个未经测试的想法

【讨论】：