将localStorage数据存储在数组中

我将response存储在localStorage中，并检索它的值。我的response格式为json格式。 response根据用户输入而改变。样本response是：将localStorage数据存储在数组中

 { 
     "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" 
    }, 
    . 
    . 

]

来源

2014-01-05 user2567857

存储和检索，而不是一个序列化数组：如果你喜欢

// 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：不是返回一个布尔值，而是返回左边的参数，如果该参数是truthy，则返回左边的参数，否则返回右边的参数。所以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>

来源

2014-01-05 14:53:53

你首先告诉'get''item'然后'set'它？ – user2567857

@ user2567857：我只是展示了你通常想要做的三个操作，并不一定说你会像这样一个接一个地完成它们。我可能会在页面加载时获取数组，然后每次更改时都保存它。 –

得到某种错误。让我看看出了什么问题 – user2567857

使用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

BTW：我写rhaboo。

来源

2014-10-01 13:59:12

将localStorage数据存储在数组中

回答

相关问题