Невозможно сохранить массив в локальном хранилище, используя JavaScript - PullRequest
Новая
       6

Невозможно сохранить массив в локальном хранилище, используя JavaScript

0 голосов
/ 02 октября 2018

Так что в основном я пытаюсь создать, из которого хранится некоторая пользовательская информация в локальном хранилище и обновляется, и удаляю информацию о пользователе, я только начал над ним работать, но застрял при вставке полных пользовательских данных в локальное хранилище.всякий раз, когда я храню данные пользователей, которые я получаю (объект: объект) в моем локальном хранилище. 

<!DOCTYPE html>
<html>
<body>


First Name: <input type="text" id="fname" placeholder="Enter First Name Here">
Id: <input type="text" id="id" placeholder="Enter id Here"><br><br>


<button onclick="myFunction()" >Submit</button>
<br>
<br>


<p id="demo"></p>
<div id="result"></div>

<script>
 function myFunction(){   

  var fname = document.getElementById("fname").value;  
     var id = document.getElementById("id").value;  

    if (typeof(Storage) !== "undefined") {
    // Store
    var person = [ firstName: fname , ID : id  ];

    var tempitem =[ [localStorage.getItem("record")] ];

    console.log();

    tempitem.push(person);

     localStorage.setItem("record",  tempitem);
     //Check if an item can be deleted using index number


}
else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

}






</script>

</body>


</html>

Ответы [ 3 ]

0 голосов
/ 02 октября 2018

localStorage хранит элемент в строках, поэтому в вашем случае вы должны сделать так:

localStorage.setItem("record", JSON.stringify(tempitem))

, а если вы хотите получить его из localStorage, вам нужно:

JSON.parse(localStorage.getItem('record'))

0 голосов
/ 02 октября 2018

Для хранения данных в локальном хранилище очень важно помнить, что вы можете хранить только строковые значения.При хранении объектов или массивов (или массивов объектов) вы должны сначала преобразовать данные в JSON.

Это просто: 

localStorage.setItem("record", JSON.stringify(data));

И снова прочитать значение: 

var record = JSON.parse(localStorage.getItem("record"));

Если вы этого не сделаете, Javascript попытается упорядочить сами данные, используя метод toString().Для объектов это означает, что будет сохранено значение [object Object], а не фактическое содержимое объекта.

Также оказывается, что вы путаете объекты и массивы Javascript.

Это объект: 

{
    firstName: "John"
    ID: "10"
}

И это массив: 

[10, 20, 30, 40, 50]

Обратите внимание на использование '{' и '}' при определении объекта и использование '[' и ']' приопределение массива.Также обратите внимание, что мы можем иметь именованное свойство в объекте, которого у нас нет в массиве.

Массив объектов будет выглядеть следующим образом: 

[
    {
        firstName: "John"
        ID: "10"
    },
    {
        firstName: "Mary"
        ID: "20"
    }
]
0 голосов
/ 02 октября 2018

Поскольку localStorage работает только со строками, вам нужно использовать JSON.parse / JSON.stringify следующим образом 

function myFunction(){     
    var fname = document.getElementById("fname").value;  
    var id = document.getElementById("id").value;  

    if (typeof(Storage) !== "undefined") {
        // note: using {} ... person is an Object, not an Array
        var person = {firstName: fname , ID : id  };

        // use JSON.parse to parse the string to an Object 
        var tempitem =JSON.parse(localStorage.getItem("record") || "[]");
        // || [] so of it doesn't exist, returns an empty array to push to
        tempitem.push(person);

        // stringify the Object to store as a string
        localStorage.setItem("record",  JSON.stringify(tempitem));
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...