Другое

Как хранить массивы в localStorage: Полное руководство

Узнайте, как правильно сохранять и получать массивы в localStorage с помощью JSON.stringify() и JSON.parse(). Освойте техники хранения массивов уже сегодня.

Авторы: НейроАгент

Как сохранить массив в localStorage?

Если бы я не использовал localStorage, мой код выглядел бы так:

javascript
var names = new Array();
names[0] = prompt("New member name?");

Это работает. Однако мне нужно сохранить эту переменную в localStorage, и это оказывается довольно сложным. Я пробовал:

javascript
var localStorage[names] = new Array();
localStorage.names[0] = prompt("New member name?");

Где я ошибаюсь?

Ключевая проблема в том, что localStorage может хранить только строки, а массивы и объекты необходимо сначала сериализовать. Для преобразования массива в строку используйте JSON.stringify(), а при извлечении — JSON.parse().

Содержание

Понимание ограничений localStorage

localStorage предназначен только для хранения строк. При попытке сохранить массив или объект напрямую браузер преобразует его в строковое представление, которое не сохраняет структуру данных. Согласно материалу Front-End Engineering Curriculum at Turing School, «ключи и значения, которые вы сохраняете в localStorage, должны быть строками».

Ваш текущий код не работает, потому что:

javascript
var localStorage[names] = new Array();  // Неверный синтаксис
localStorage.names[0] = prompt("New member name?");  // Не будет работать как ожидается

Браузер пытается преобразовать массив в строку, но результат не пригоден для сохранения структуры массива.

Правильный способ хранения массивов

Нужно сериализовать массив с помощью JSON.stringify() перед сохранением:

javascript
var names = new Array();
names[0] = prompt("New member name?");

// Преобразуем массив в JSON‑строку и сохраняем
localStorage.setItem("names", JSON.stringify(names));

Как объясняет LogRocket Blog, «предположим, у нас есть несколько похожих объектов, которые мы хотим сгруппировать и сохранить как одну JSON‑строку в localStorage. Мы можем превратить их в массив объектов, а затем сериализовать».

Извлечение массивов из localStorage

Когда нужно снова работать с сохранённым массивом, необходимо распарсить JSON‑строку обратно в массив:

javascript
// Получаем JSON‑строку из localStorage
var storedNames = localStorage.getItem("names");

// Преобразуем JSON‑строку обратно в массив
var namesArray = JSON.parse(storedNames);

// Теперь можно работать с массивом
console.log(namesArray[0]); // Выводит первый элемент

Важно: всегда проверяйте наличие данных перед парсингом, чтобы избежать ошибок:

javascript
var storedNames = localStorage.getItem("names");
var namesArray = storedNames ? JSON.parse(storedNames) : [];

Полный рабочий пример

Ниже приведён полный пример, демонстрирующий сохранение и извлечение массивов:

javascript
// Создание и сохранение массива
function storeNames() {
    var names = [];
    var name = prompt("Enter a name (or click Cancel to finish):");
    
    while (name !== null) {
        names.push(name);
        name = prompt("Enter another name (or click Cancel to finish):");
    }
    
    // Преобразуем массив в JSON‑строку и сохраняем
    localStorage.setItem("names", JSON.stringify(names));
    console.log("Array stored successfully!");
}

// Извлечение и вывод сохранённого массива
function retrieveNames() {
    var storedNames = localStorage.getItem("names");
    
    if (storedNames) {
        var namesArray = JSON.parse(storedNames);
        console.log("Stored names:", namesArray);
        return namesArray;
    } else {
        console.log("No names found in localStorage");
        return [];
    }
}

// Использование
storeNames();
var retrievedNames = retrieveNames();
console.log("Retrieved names:", retrievedNames[0]); // Доступ к отдельным элементам

Распространённые ошибки и решения

Ошибка 1: Прямое хранение объекта

javascript
// Неправильно – сохраняет "[object Object]"
localStorage.setItem("data", myArray);

Решение:

javascript
// Правильно
localStorage.setItem("data", JSON.stringify(myArray));

Ошибка 2: Забыли распарсить при извлечении

javascript
// Неправильно – получаем строку, а не массив
var myArray = localStorage.getItem("data");
myArray[0] = "new value"; // Это не сработает как ожидается

Решение:

javascript
// Правильно
var myArray = JSON.parse(localStorage.getItem("data"));
myArray[0] = "new value"; // Теперь это работает

Ошибка 3: Неправильный синтаксис localStorage

javascript
// Неправильно – `localStorage` не массив
localStorage.names[0] = "John";

Решение:

javascript
// Правильно
localStorage.setItem("names", JSON.stringify(["John"]));

Альтернативные подходы

Вспомогательные функции для лучшей организации кода

Можно создать вспомогательные функции, которые автоматически сериализуют/десериализуют данные:

javascript
// Вспомогательные функции
function saveToLocalStorage(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
}

function getFromLocalStorage(key) {
    var data = localStorage.getItem(key);
    return data ? JSON.parse(data) : null;
}

// Использование
var names = ["Alice", "Bob", "Charlie"];
saveToLocalStorage("teamMembers", names);

var retrievedNames = getFromLocalStorage("teamMembers");
console.log(retrievedNames); // ["Alice", "Bob", "Charlie"]

Использование современного синтаксиса ES6+

javascript
// Используем const/let и методы массивов
const names = [];
const name = prompt("Enter a name:");

if (name) {
    names.push(name);
    localStorage.setItem("names", JSON.stringify(names));
}

// Извлечение с опциональной цепочкой
const storedNames = JSON.parse(localStorage.getItem("names")) ?? [];
console.log(storedNames);

Помните, что localStorage имеет ограничение по размеру (обычно около 5 МБ), поэтому очень большие массивы могут вызвать проблемы. Для более сложных задач хранения данных рассмотрите IndexedDB или другие решения браузерного хранилища.

Источники

  1. How to store an Array or Object in localStorage using JS | bobbyhadz
  2. How to store objects or arrays in browser local storage - freeCodeCamp
  3. JSON and localStorage - Front-End Engineering Curriculum - Turing School
  4. Storing and retrieving JavaScript objects in localStorage - LogRocket
  5. Local storage with JSON parse and stringify - GitHub Gist
  6. Storing and retrieving objects with localStorage [HTML5] - Coderwall
Авторы
НейроАгент
Автор
Проверено модерацией
НейроОтветы
Модерация
Как хранить массивы в localStorage: Полное руководство