7 способов хранения объектов в HTML5 localStorage/sessionStorage на JavaScript

Введение

Веб-приложения становятся все более сложными и требуют сохранения данных между сеансами пользователя. В HTML5 появились новые API – localStorage и sessionStorage, которые позволяют хранить данные непосредственно на стороне клиента. В этой статье мы рассмотрим 7 способов хранения объектов в localStorage/sessionStorage на JavaScript.

1. Использование методов JSON.stringify и JSON.parse

Один из самых простых способов сохранения объектов в localStorage/sessionStorage – это преобразование объекта в строку JSON с помощью метода JSON.stringify, а затем сохранение строки в localStorage/sessionStorage. При необходимости можно восстановить объект из строки JSON с помощью метода JSON.parse.

const user = { name: 'John', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Выведет 'John'

2. Использование методов JSON.stringify и JSON.parse с прототипом

Если объект содержит методы, они не сохраняются при преобразовании в JSON. Однако, можно использовать прототипы, чтобы сохранить методы и восстановить их при восстановлении объекта.

function User(name, age) {
  this.name = name;
  this.age = age;
}

User.prototype.sayHello = function() {
  console.log('Hello');
};

const user = new User('John', 25);
localStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem('user'));
storedUser.prototype = User.prototype;
storedUser.sayHello(); // Выведет 'Hello'

3. Использование атрибута data-*

HTML5 предоставляет атрибут data-* для хранения пользовательских данных. Мы можем использовать этот атрибут для хранения объекта в HTML-элементе.

const user = { name: 'John', age: 25 };
const element = document.getElementById('element');
element.dataset.user = JSON.stringify(user);

const storedUser = JSON.parse(element.dataset.user);
console.log(storedUser.name); // Выведет 'John'

4. Использование IndexedDB

IndexedDB – это API браузера, которое позволяет хранить структурированные данные на стороне клиента. Мы можем использовать IndexedDB для хранения объектов.

const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['users'], 'readwrite');
  const objectStore = transaction.objectStore('users');

  const user = { id: 1, name: 'John', age: 25 };
  objectStore.add(user);

  const getRequest = objectStore.get(1);
  getRequest.onsuccess = function(event) {
    const storedUser = event.target.result;
    console.log(storedUser.name); // Выведет 'John'
  };
};

5. Использование Cookies

Cookies – это небольшие текстовые файлы, которые хранятся на стороне клиента. Мы можем использовать Cookies для хранения объектов.

function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = 'expires=' + date.toUTCString();
  document.cookie = name + '=' + JSON.stringify(value) + ';' + expires + ';path=/';
}

function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      return JSON.parse(cookie.substring(name.length + 1, cookie.length));
    }
  }
  return null;
}

const user = { name: 'John', age: 25 };
setCookie('user', user, 7);

const storedUser = getCookie('user');
console.log(storedUser.name); // Выведет 'John'

6. Использование LocalForage

LocalForage – это библиотека JavaScript, которая предоставляет простой API для хранения данных на стороне клиента. Мы можем использовать LocalForage для хранения объектов.

const user = { name: 'John', age: 25 };
localforage.setItem('user', user).then(function() {
  return localforage.getItem('user');
}).then(function(storedUser) {
  console.log(storedUser.name); // Выведет 'John'
}).catch(function(error) {
  console.log(error);
});

7. Использование WebSQL

WebSQL – это API браузера, которое позволяет хранить структурированные данные на стороне клиента. Мы можем использовать WebSQL для хранения объектов.

const db = openDatabase('MyDatabase', '1.0', 'My Database', 2 * 1024 * 1024);

db.transaction(function(transaction) {
  transaction.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name, age)');
  transaction.executeSql('INSERT INTO users (id, name, age) VALUES (?, ?, ?)', [1, 'John', 25]);
});

db.transaction(function(transaction) {
  transaction.executeSql('SELECT * FROM users WHERE id = ?', [1], function(transaction, result) {
    const storedUser = result.rows.item(0);
    console.log(storedUser.name); // Выведет 'John'
  });
});

Заключение

В этой статье мы рассмотрели 7 способов хранения объектов в HTML5 localStorage/sessionStorage на JavaScript. Каждый из этих способов имеет свои преимущества и недостатки, поэтому выбор зависит от конкретных требований вашего приложения. Помните, что безопасность всегда должна быть приоритетом при работе с сохраненными данными на стороне клиента.