解析检索到的 localStorage 项目会在控制台中带来不良结果

Question

我正在使用 localStorage 制作笔记网络应用程序，当用户提交笔记时，输入和文本区域的值保存在 object 中。

创建的每个笔记都是一个 object，包含 key/value 对

编号：0
标题：来自输入的值
内容：文本区域的值

在 localStorage 包含至少一个带有字符串的项目之后，在创建新笔记时，我 get/retrieve localStorage 字符串将包含过去输入的字符串格式的笔记。

解析 localStorage 字符串并将其保存到 variable/array 以添加之前的注释。
每次将保存到输入 object 中的新输入值推送到数组，然后再使用数组设置 localStorage 项（当然是将其字符串化）。

下面是负责将笔记保存到 localStorage 的函数

    // User clicks to save note
    post_note_button.onclick = function() {

    // Get values from input and textarea
    var note_title = document.getElementById("note-title").value;
    var note_textarea = document.getElementById("note-textarea").value;

    // Each time note is created, new values from input will be saved
    var input = { id: note_id_count, title: note_title, content: note_textarea };

    // ------------------------------------------------

    switch(localStorage.getItem("note")) {

        // If retrieve for localStorage item returns false/doesn't exist
        // PURPOSE: Set localStorage string for first time
        // 1. Create localStorage item with values from user's input
        case null:
            localStorage.setItem("note", JSON.stringify(input));
        break;

        // If retrieve for localStorage item returns true/exists
        // PURPOSE: To retrieve localStorage string and manipulate it
        // 1. Changing localStorage string, requires string to be retrieved and saved as array
        // 2. Add item to array
        // 3. Create/set localStorage item with values from array, convert to string
        default:
            var note_array = [JSON.parse(localStorage.getItem("note"))];
            console.log(note_array);

            note_array.push(input);

            localStorage.setItem("note", JSON.stringify(note_array));
        break;
    }

    // ------------------------------------------------ 
};

我的问题： 当我 console.log & parse the localStorage item "note" 添加一些注释后，我应该得到

Array [ Object, Object, Object ]

相反我得到：

Array [ Array[2], Object ]

codepen: http://codepen.io/anon/pen/JdjMYq

Answer 1

看起来当你将第一个项目保存到 localStorage 中时（当那里什么都没有时），你只是将它保存为一个对象。然后当你添加下一个项目时，你将它包装在一个数组中。

相反，您可以将原始对象保存在一个数组中，然后将其推送到那个数组中：

case null:
  localStorage.setItem("note", JSON.stringify([input]));
  break;

--

default:
    var note_array = JSON.parse(localStorage.getItem("note"));
    console.log(note_array);

    note_array.push(input);

    localStorage.setItem("note", JSON.stringify(note_array));
    break;

看到这个forked codepen

解析检索到的 localStorage 项目会在控制台中带来不良结果

Parsing retrieved localStorage item brings undesired result in console

javascript

json

local-storage