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

Window.localStorage

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

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

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

So I know what line one is. It's just storing the variables

да.

I'm going to assume line two is just turning the variable storage into a string.

Правильно.

I have no idea what line three means

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

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

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

// 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;

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

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

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

Четвертая строка: извлекает localStorage с помощью его ключа.

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

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

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

Сохранение

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

Получение

4. text = localStorage.getItem("testJSON");
   • Эта строка извлекает сохраненную строку JSON.
5. obj = JSON.parse(text);
   • Это анализирует полученную строку JSON обратно в объект Javascript.
6. document.getElementById("demo").innerHTML = obj.name;
   • Это позволит получить доступ к свойству name объекта, который вы проанализировали, и распечатать его в демонстрационном элементе на странице.

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

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