如何使用localstorage将对象数组从一个文件存储到另一个文件
[英]how to store array of objects using localstorage fron one file to other file
问题描述
I am new to localstorage.I am trying to store json data in one file and retrieving the data in other file.Below is my json data which i have fetched from an url.I have tried storing feeds data using using localstorage now i am tring to fetch the data in other html file.But i am getting only the final object from the feeds.How can i get all the feed objects in other file.
我是 localstorage 的新手。我正在尝试将 json 数据存储在一个文件中并在另一个文件中检索数据。下面是我从 url 中获取的 json 数据。我尝试使用 localstorage 存储提要数据，现在我正在尝试获取其他 html 文件中的数据。但我只从提要中获取最终对象。如何获取其他文件中的所有提要对象。
{
"channel":{
"id":9,
"name":"my_house",
"description":"Netduino Plus connected to sensors around the house",
"latitude":"40.44",
"longitude":"-79.9965",
"field1":"Light",
"field2":"Outside Temperature",
"created_at":"2010-12-14T01:20:06Z",
"updated_at":"2017-02-13T09:09:31Z",
"last_entry_id":11664376
},
"feeds":[{
"created_at":"2017-02-13T09:07:16Z",
"entry_id":11664367,
"field1":"196",
"field2":"31.507430997876856"
},{
"created_at":"2017-02-13T09:07:31Z",
"entry_id":11664368,
"field1":"192",
"field2":"30.743099787685775"
},{
"created_at":"2017-02-13T09:07:46Z",
"entry_id":11664369,
"field1":"208",
"field2":"28.280254777070063"
}]}
One.html:-(here i am storing all the feeds data) One.html:-(这里我存储了所有的提要数据)
$.ajax({
url : "https://api.thingspeak.com/channels/9/feeds.json?results=3",
dataType:"json",
cache: false,
error:function (xhr, ajaxOptions, thrownError){
debugger;
alert(xhr.statusText);
alert(thrownError);
},
success : function(json1) {
console.log(json1);
json1.feeds.forEach(function(feed, i) {
console.log("\n The deails of " + i + "th Object are : \nCreated_at: " + feed.created_at + "\nEntry_id:" + feed.entry_id + "\nField1:" + feed.field1 + "\nField2:" + feed.field2);
localStorage.setItem('Created_at', feed.created_at);
var create = localStorage.getItem('Created_at');
console.log(create);
localStorage.setItem('Entry_id', feed.entry_id);
var entry = localStorage.getItem('Entry_id');
console.log(entry);
localStorage.setItem('Field1', feed.field1);
var fd1 = localStorage.getItem('Field1');
console.log(fd1);
localStorage.setItem('Field2', feed.field2);
var fd2 = localStorage.getItem('Field2');
console.log(fd2);
});
other.html:(here i am trying to fetch the localstorage data) other.html:(在这里我试图获取本地存储数据）
<script>
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var create = localStorage.getItem('Created_at');
console.log(create);
document.writeln("<br>Created_at = "+create);
var entry = localStorage.getItem('Entry_id');
document.writeln("<br>Entry_id = "+entry);
var fd1 = localStorage.getItem('Field1');
document.writeln("<br>Field1 = "+fd1);
var fd2 = localStorage.getItem('Field2');
document.writeln("<br>Field2 = "+fd2);
}
</script>
2 个解决方案
解决方案1
0 已采纳 2017-02-13 11:24:19
Because you are over-riding the localStorage item in your for Loop.因为您在 for 循环中覆盖了localStorage项。
The required for loop when simplified looks like:简化时所需的for循环如下所示：
json1.feeds.forEach(function(feed, i) {
localStorage.setItem('Created_at', feed.created_at); //Gets over-riden on every iteration
localStorage.setItem('Field1', feed.field1);});
That's why after the loop is completed.这就是循环完成后的原因。 The Created_at field would only have the value of the most recently processed item in the array ie the last element. Created_at字段将只有数组中最近处理的项目的值，即最后一个元素。 What you need to is create a corresponding array where each element would correspond to a feed item that you are reading from the API response.您需要创建一个相应的array ，其中每个元素都对应于您从 API 响应中读取的feed项。
Now, localStorage can simply store key value pairs.现在， localStorage可以简单地存储键值对。 It doesn't have support for types like array.它不支持像数组这样的类型。 What you can do is something on these lines ( Untested Code ):你可以做的是在这些行（未经测试的代码）上做一些事情：
json1.feeds.forEach(function(feed, i) {
var feedsArray = JSON.parse(localStorage.getItem('feedsArray'));
feedsArray.push(feed);
localStorage.setItem('feedsArray',JSON.stringify(feedsArray));
});
Yes, You will have to check if feedsArray key exists or not and set it as an empty array the first time.是的，您必须在第一次检查feedsArray键是否存在并将其设置为空数组。 I have deliberately not put in the entire code as it is quite simple and should be good exercise for you.我特意没有把整个代码放进去，因为它很简单，对你来说应该是一个很好的练习。
So, once you are done and you want to read all the feeds from localStorage .因此，一旦您完成并且您想从localStorage读取所有提要。 Just get the feedsArray key and parse it and then iterate over it.只需获取feedsArray键并解析它，然后对其进行迭代。 Put simply, the basic idea is to have a JSON array of feeds and store it as a string with key feedsArray in localStorage.简而言之，基本思想是拥有一个JSON提要数组，并将其存储为一个字符串，键为feedsArray中的 localStorage。
The code snippet I have given above can get you started toward the solution I propose.我上面给出的代码片段可以让您开始使用我提出的解决方案。
解决方案2
0 2017-02-14 11:25:45
The answer for the above issue is below.through which i got the solution.But not too sure if der is any wrong.上述问题的答案如下。通过它我得到了解决方案。但不太确定 der 是否有任何错误。 one.html:一个.html：
$.ajax({
url : "https://api.thingspeak.com/channels/9/feeds.json?results=3",
dataType:"json",
cache: false,
error:function (xhr, ajaxOptions, thrownError){
debugger;
alert(xhr.statusText);
alert(thrownError);
},
success : function(json1) {
console.log(json1);
json1.feeds.forEach(function(feed, i) {
console.log("\n The deails of " + i + "th Object are :\nCreated_at: " + feed.created_at + "\nEntry_id:" + feed.entry_id + "\nField1:" + feed.field1 + "\nField2:" + feed.field2);
var feedsArray = JSON.parse(localStorage.getItem('feedsArray'));
feedsArray.push(feed);
localStorage.setItem('feedsArray',JSON.stringify(feedsArray));
for (var i = 0; i < localStorage.length;i++){
var savedArr =localStorage.getItem('feedsArray[i]')
}
});
other.html:其他.html：
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var feedsArray = JSON.parse(localStorage.getItem('feedsArray'));
for (var i = 0; i < localStorage.length;i++){
var savedArr =localStorage.getItem('feedsArray[i]');
//feedsArray.push(savedArr);
}
console.log(savedArr);
document.writeln("<br>FEEDS = "+savedArr);
}
</script
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.