在网页上显示 localStorage 中存在的所有对象答案

【问题标题】：Show all objects present in localStorage on a webpage在网页上显示 localStorage 中存在的所有对象
【发布时间】：2017-04-07 23:13:20
【问题描述】：

我将表单中的数据以以下格式存储在本地存储中：

Object {title: "dsadasds", dueDate: "dsadasdsa", summary: "dsadadas", body: "dasdasdas"}
Object {title: "dasdadsa", dueDate: "dasdasdadasda", summary: "dsadasdasd", body: "dasdasdas"}

每次用户提交表单时，此数据都会存储在本地存储中。现在在另一个页面'localhost:3000/notes'中，我想显示存储在 localStorage 中的所有这些对象。目前使用以下代码，它只是显示最后提交的对象。

        var form = $('#form'),
        formTitle = $('#title'),
        formDueDate = $('#dueDate'),
        formSummary = $('#summary'),
        formBody = $('#body');

        var title = formTitle.val();
        var dueDate = formDueDate.val();
        var summary = formSummary.val();
        var body = formBody.val();
        var newContent2 = $('#new-content2')

        var test = {};
        test = {
            title: title,
            dueDate: dueDate,
            summary: summary,
            body: body
        }

        localStorage.setItem('test', JSON.stringify(test));
        var LocalStoredData = JSON.parse(localStorage.getItem('test'));
        console.log(LocalStoredData);

       //for retrieving data from locastorage
       var retrievedData =  localStorage.getItem('test');
       var text = JSON.parse(retrievedData);
       var showTitle = text["title"];
       var showDueDate=  text["dueDate"];
       var showSummary = text["summary"];
       var showBody = text["body"];

       $('#showTitle').html(showTitle);
       $('#showDueDate').html(showDueDate);
       $('#showSummary').html(showSummary);
       $('#showBody').html(showBody);

我需要循环遍历所有对象（或任何其他机制）以从 localStorage 中提取所有对象并将它们显示在网页上的适当 div 中。我尝试将检索代码放入循环中：

for(var i=0;i<localStorage.length;i++)

但是使用这个循环它没有显示任何东西。如何显示我的 localStorage 中存在的所有对象。

【问题讨论】：

LocalStorage 是一个键值对存储。您将对象保存在哪个键下？您是否考虑过只使用一个键并在其中保存整个对象数组？

标签： javascript ajax ecmascript-6 local-storage

【解决方案1】：

你在寻找

for (var i=0; i<localStorage.length; i++) {
    var key = localStorage.key(i);
    var item = localStorage.getItem(key);
    try {
        item = JSON.parse(item);
    } catch(e) {
        console.log(key+" is not in JSON format");
    }
    …
}

【讨论】：

【解决方案2】：

您还可以使用Object.keys轻松获取LocalStorage的所有内容：

Object.keys(localStorage).forEach(key => {
  console.log(key, localStorage.getItem(key))
})

【讨论】：

这也将为您提供.length 密钥