將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數據存儲在數組中

回答

相關問題