Пример JSON, сбивающий меня с толку - о JSON.parse, JSON.stringify, localStorage.setItem и localStorage.getItem - PullRequest
Новая
       26

Пример JSON, сбивающий меня с толку - о JSON.parse, JSON.stringify, localStorage.setItem и localStorage.getItem

3 голосов
/ 08 марта 2019

Я только начинаю изучать JSON, и W3schools не очень хорошо объясняют, что делает каждая строка. Я могу понять, что некоторые из них значат, но я бы хотел понять это полностью. 

// Storing data:
1. myObj = {name: "John", age: 31, city: "New York"};
2. myJSON = JSON.stringify(myObj);
3. localStorage.setItem("testJSON", myJSON);

// Retrieving data:
4. text = localStorage.getItem("testJSON");
5. obj = JSON.parse(text);
6. document.getElementById("demo").innerHTML = obj.name;

Так что я знаю, какая строка первая Это просто хранение переменных. Я собираюсь предположить, что вторая строка просто превращает хранилище переменных в строку. Если это неправильно, пожалуйста, скажите мне. Я понятия не имею, что означает третья строка, поэтому кто-то может объяснить, что он делает?

строки 4 и 5 меня также смущают. Строка 6 проста для понимания.

TLDR: Что делают строки 2,3,4 и 5?

Ответы [ 7 ]

4 голосов
/ 08 марта 2019

Я буду проходить по каждой строке шаг за шагом.

Сохранение

  1. myObj = {name: "John", age: 31, city: "New York"};
    • Эта строка создает объект.
  2. myJSON = JSON.stringify(myObj);
    • Эта строка превращает объект javascript в строку JSON, используемую любым приложением, принимающим JSON.
  3. localStorage.setItem("testJSON", myJSON);
    • Современные браузеры имеют локальный API-интерфейс, который позволяет хранить данные в браузере.Эта строка хранит эту строку JSON внутри localStorage для дальнейшего использования.

Получение

text = localStorage.getItem("testJSON");
  • В этой строке извлекается сохраненная строка JSON.
obj = JSON.parse(text);
  • При этом полученная строка JSON анализируется обратно вобъект Javascript.
document.getElementById("demo").innerHTML = obj.name;
  • Это позволит получить доступ к свойству name проанализированного вами объекта и распечатать его в демонстрационном элементе на странице.
3 голосов
/ 08 марта 2019

Так что я знаю, что это за линия. Это просто хранение переменных

Да.

Я предполагаю, что вторая строка просто превращает хранилище переменных в строку.

Это верно.

Понятия не имею, что означает третья строка

См. Документацию MDN localStorage . Эта строка не имеет никакого отношения к самому объекту JSON, просто показывает, что вы можете сохранить этот объект на localStorage и использовать его позже, когда вы снова загрузите эту страницу, что, кстати, и делает Строка 4 .

То, что делает Строка 5 , в основном является обратным процессом для Строка 2 , поэтому вы даете ей строку с допустимым JSON, и она возвращает правильный объект JS.

2 голосов
/ 08 марта 2019

Вот объяснение: 

// Storing object with key name and city in a variable named myObj
1. myObj = {name: "John", age: 31, city: "New York"};

//Converting the myObj into a string representation called serializing/serialization
2. myJSON = JSON.stringify(myObj);

//Setting a key named testJSON in browsers localStorage
//coz You cannot store anything in localStorage except a string
3. localStorage.setItem("testJSON", myJSON);

// Retrieving data from the localStorage
4. text = localStorage.getItem("testJSON");

//Converting it back to object form from the string by parsing it
5. obj = JSON.parse(text);

//Setting the html of #demo element in dom to the name 
6. document.getElementById("demo").innerHTML = obj.name;
0 голосов
/ 08 марта 2019

Прежде всего, обратите внимание на учебник, на который вы ссылаетесь в состояниях, красным текстом: «Подробнее о JSON.parse () / JSON.stringify () вы узнаете позже в учебнике.

Короче говоря, stringify () - это функция для преобразования объекта json в строку. parse () - это функция, которая анализирует строку, поэтому из нее может быть получен вывод.

0 голосов
/ 08 марта 2019

Первая строка: создает переменный объект.

Вторая строка: преобразует объект в JSON.

Строка третья: сохранить объект в локальном хранилище и задать его пару ключ-значение. Его ключ называется «testJSON»

Строка четвертая: извлекает localStorage, используя его ключ.

Строка пять: анализирует данные и преобразует их в объект.

Строка шесть: установить значение идентификатора элемента для объекта с ключом «имя».

0 голосов
/ 08 марта 2019
  • Строка 2 сериализует ваш объект в строку для его сохранения ...
  • ... В локальном хранилище , которое является своего рода базой данных (строка 3).
  • Строка 4 просит локальное хранилище вернуть ранее сохраненное значение,
  • Когда оно сериализовано (вы сохраняете его в string), вы должны проанализировать его ()."преобразовать его" ) в объект JavaScript, чтобы использовать его (используя JSON.parse ).
0 голосов
/ 08 марта 2019

Window.localStorage

localStorage является частью Web Storage API, что позволяет хранить некоторые данные без срока действия, например sessionStorage. Это особенность почти всех современных браузеров, которая позволяет хранить пары ключ / значение с целью их повторного использования. Предполагается, что это будет своего рода заменой некоторого использования куки

localStorage.getItem() и localStorage.setItem() являются наиболее распространенными методами, используемыми для извлечения данных для данного ключа и установки значения данных для данного ключа.

Типичное использование для localStorage.setItem() - это когда вам нужно сохранить некоторые данные для будущего использования, чтобы они не были потеряны при обновлении страницы пользователем или открытии другой страницы. Когда вам нужно восстановить данные, которые вы сохранили, вы используете localStorage.getItem().

Похоже на localStorage, у вас есть sessionStorage, это похоже. Единственное отличие состоит в том, что sessionStorage имеет время истечения, поэтому лучше использовать его, когда вы не хотите временно хранить некоторые данные.

Важно: Помните, что хранение данных таким способом небезопасно, поэтому избегайте хранения конфиденциальных данных.

JSON.parse и JSON.stringify

JSON.parse используется для преобразования строкового формата JSON в объект, а JSON.stringify используется для преобразования строкового объекта.

Типичное использование для JSON.parse - это когда вы получаете строку из какого-либо внешнего источника, поскольку строка - это способ хранения данных. Он преобразует строку в объект, который можно использовать в вашем коде JavaScript для манипулирования свойствами данных этого объекта. JSON.stringify в основном используется для хранения данных в виде строки после некоторых манипуляций со свойствами объекта.

Подробнее об API веб-хранилища:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

О методах JSON и JSON.stringify и JSON.parse:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

...