Зберігання даних на стороні клієнта
Можна зберігати строкові дані так, що вони переживуть перезавантаження сторінок - для цього треба покласти їх в об'єкт localStorage. Він дозволяє зберігати строкові дані під іменами (які теж є рядками), як в цьому прикладі:
localStorage.setItem ( "username", "marijn");
console.log (localStorage.getItem ( "username"));
//. marijn
localStorage.removeItem ( "username");
Змінна в localStorage зберігається, поки її НЕ перезапишуть, віддаляється за допомогою removeItem або очищенням локального сховища користувачем.
У сайтів з різних доменів - різні відділення в цьому сховищі. Тобто, дані, збережені з сайту в localStorage. можуть бути прочитані або перезаписані тільки скриптами з цього ж сайту.
Також браузери обмежують обсяг збережених даних, зазвичай в кілька мегабайт. Це обмеження, укупі з тим фактом, що забивання жорстких дисків у людей не приносить прибутку, запобігає от'еданіе місця на диску.
Наступний код реалізує просту програму для ведення нотаток. Вона зберігає замітки у вигляді об'єкта, асоціюючи заголовки з вмістом. Він кодується в JSON і зберігається в localStorage. Користувач може вибрати записку через поле
Скрипт инициализирует змінну notes значенням з localStorage. а якщо його там немає - простим об'єктом з одним записом «що купити». Спроба прочитати відсутнє поле з localStorage поверне null. Передавши null в JSON.parse. ми отримаємо null назад. Тому для значення за замовчуванням можна використовувати оператор || .
Коли дані в note змінюються (додається новий запис або змінюється поточна), для поновлення зберігається поля викликається функція saveToStorage. Якщо б ми розраховували, що у нас будуть зберігатися тисячі записів, це було б занадто накладно, і нам довелося б придумати більш складну процедуру для зберігання - наприклад, своє поле для кожного запису.