Question

我将response存储在localStorage中并检索它的值。我的response格式为json。 response会根据用户输入进行更改。示例response是：

      {
       "Name": "robert",
       "Number": "555-555-1234"
      }

我正在存储，检索并显示response：

     localStorage.setItem("response", JSON.stringify(response));
     var myResponse = localStorage.getItem("response");
     console.log(myResponse);

目前它正在向我显示最新的response，之前的所有response都会被替换。如何将response存储在array中，以便我可以存储我获得的所有response。类似的东西：

  [ 
   {
       "Name": "robert",
       "Number": "555-555-1234"
   },
   {
       "Name": "john",
       "Number": "555-555-9999 Ext. 123"
   },
   {
       "Name": "albert",
       "Number": "555-555-8765"
   },
   {
       "Name": "jhony",
       "Number": "555-555-3098"
   },
   .
   .

 ]

Answer 1

存储并检索序列化数组：

// Retrieving
var responses = JSON.parse(localStorage.responses || "null") || [];

// Adding a response
responses.push(response);

// Saving the array
localStorage.responses = JSON.stringify(responses);

如果您愿意，可以使用getItem / setItem：

// Retrieving
var responses = JSON.parse(localStorage.getItem("responses") || "null") || [];

// Adding a response
responses.push(response);

// Saving the array
localStorage.setItem("responses", JSON.stringify(responses));

成语

var responses = JSON.parse(localStorage.responses || "null") || [];

可能会使用一些解释：

如果我们尝试检索本地存储中不存在的内容，我们会返回null。 JavaScript有一个curiously-powerful || operator：它不是返回一个布尔值，而是返回左手参数，如果该参数是真实的，否则返回它的右手参数。因此，localStorage.responses || "null"将是本地存储中的字符串，如果没有，则为字符串"null"。
然后我们解析结果，它是我们之前存储的序列化数组或字符串"null"。虽然字符串"null"不是有效的JSON文档，但是有效的JSON 片段，并且JSON.parse被记录为接受片段。因此，解析的结果要么是我们先前存储的数组，要么是null。
然后我们再次使用奇怪强大的||运算符在反序列化结果和空白数组（[]）之间进行选择。因此，如果我们反序列化null，我们会选择[];如果我们反序列化一个数组，我们就会得到它。

这是一个完整的工作示例;它只是围绕上面的基本操作设置了一些UI：Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Complete Example</title>
  <style>
    .response {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <input type="text" id="responseInput">
  <input type="button" id="addResponse" value="Add">
  <script>
    (function() {
      // Get the responses (if any) or an empty array
      var responses = loadResponses();

      // Show the existing responses
      var container = $("#container");
      $.each(responses, function(index, response) {
        showResponse(response);
      });

      // Wait for user to add new ones
      var responseInput = $("#responseInput");
      responseInput.focus();
      $("#addResponse").click(function() {
        var text = $.trim(responseInput.val()),
            response = {
              text: text,
              id:   +new Date()
            };
        if (text) {
          responses.push(response);
          showResponse(response);
          saveResponses();
          responseInput.val("").focus();
        }
      });

      // Delete responses on click
      container.on("click", ".response", function() {
        var $this = $(this),
            id = parseInt($this.attr("data-id"), 10),
            index;
        $this.remove();
        if (id) {
          for (index = 0; index < responses.length; ++index) {
            if (responses[index].id === id) {
              responses.splice(index, 1);
              saveResponses();
              break;
            }
          }
        }
      });

      function loadResponses() {
        return JSON.parse(localStorage.responses || "null") || [];
      }

      function saveResponses() {
        localStorage.responses = JSON.stringify(responses);
      }

      function showResponse(response) {
        $("<div>")
          .addClass("response")
          .text(response.text)
          .attr("data-id", response.id)
          .appendTo(container);
      };
    })();
  </script>
</body>
</html>

Answer 2

使用http://rhaboo.org：

var store = Rhaboo.persistent("Addresses");

if (store.addys === undefined) { //first run
  store.write('addys',
    [ 
       {
           "Name": "robert",
           "Number": "555-555-1234"
       },
       {
           "Name": "john",
           "Number": "555-555-9999 Ext. 123"
       }
    ] );
}

store.addys.push(
  {
     "Name": "albert",
     "Number": "555-555-8765"
  },
  {
     "Name": "johnny",
     "Number": "555-555-3098"
  }
);

console.log( store.addys[2].Name ); //albert

顺便说一句：我写过rhaboo。

将localStorage数据存储在数组中

2 个答案: