Перший пост по Javascript. Розглянемо принцип роботи localStorage

LocalStorage у JavaScript — це таке схо­ви­ще для збе­ре­же­н­ня дрі­бних шма­то­чків інфор­ма­ції на ком­п’ю­те­рі кори­сту­ва­ча, пря­мо у його бра­у­зе­рі. Він пра­цює на прин­ци­пі «ключ-зна­че­н­ня», тоб­то ти можеш збе­рег­ти деяке зна­че­н­ня під пев­ним клю­чем і потім отри­ма­ти його назад. Ось пара при­кла­дів, як з ним працювати:

// Записати дані в LocalStorage
localStorage.setItem('мійКлюч', 'моєЗначення');

// Отримати дані з LocalStorage
var моєЗначення = localStorage.getItem('мійКлюч');

// Видалити дані з LocalStorage
localStorage.removeItem('мійКлюч');

// Очистити усі дані в LocalStorage
localStorage.clear();

Демон­стра­ція робо­ти localStorage

Основ­ни­ми осо­бли­во­стя­ми localStorage є:

• Спіль­ний доступ з усіх вкла­док і вікон для одно­го і того ж само­го сайту.
• Тер­мін дії даних не закін­чу­є­ться. Дані зали­ша­ю­ться після пере­за­ван­та­же­н­ня бра­у­зе­ра і навіть пере­за­ван­та­же­н­ня ОС.

Напри­клад, якщо ви запу­сти­те цей код…

localStorage.setItem('test', 1);

…І закриєте/​відкриєте бра­у­зер або про­сто від­кри­є­те ту саму сто­рін­ку в іншо­му вікні, то змо­же­те отри­ма­ти дані так:

alert( localStorage.getItem('test') ); // 1

При­коль­на річ в тому, що ці дані зали­ша­ю­ться в LocalStorage і після того, як закри­ти вклад­ку бра­у­зе­ра чи навіть пере­за­пу­сти­ти його. Тоб­то, якщо кори­сту­вач збе­рі­гає якісь дані сай­ту, то вони зали­ша­ться в браузері.

Є одне обме­же­н­ня: можна збе­рег­ти при­бли­зно 5 МБ даних. Так що не пере­бор­щи зі зберіганням.

Ще одна річ важли­ва — LocalStorage пра­цює тіль­ки для того само­го доме­ну, на яко­му були збе­ре­же­ні дані. Це озна­чає, що сайт example​.com не може отри­ма­ти доступ до даних, збе­ре­же­них на site​.com.

Отже, якщо тобі тре­ба щось про­сте і швид­ке для збе­рі­га­н­ня кіль­кох речей на боці клі­єн­та, LocalStorage — це твій вибір! Напри­клад можна зро­би­ти пере­ми­кач на тем­ну тему, уві­мкну­ти нала­шту­ва­н­ня, яке буде при­хо­ву­ва­ти деякі бло­ки (div) сай­ту, або пові­дом­ле­н­ня про кукі.

Ми вже має­мо cookies. Наві­що дода­тко­ві об’єкти?

• На від­мі­ну від фай­лів cookies, об’єкти веб-схо­ви­ща не над­си­ла­ю­ться на сер­вер із кожним запи­том. Зав­дя­ки цьо­му ми може­мо збе­рі­га­ти наба­га­то біль­ше даних. Біль­шість бра­у­зе­рів дозво­ля­ють при­найм­ні 5 мега­бай­тів даних (або біль­ше), кори­сту­вач може навіть змі­ни­ти цей об’єм.
• Крім того, на від­мі­ну від фай­лів cookies, сер­вер не може мані­пу­лю­ва­ти об’єктами схо­ви­ща через HTTP-заго­лов­ки. Все зро­бле­но на JavaScript.
• Схо­ви­ще прив’язане до ори­гі­наль­но­го сай­ту (домен/​протокол/​порт). Таким чином, що різні про­то­ко­ли або субдо­ме­ни мають різні об’єкти збе­рі­га­н­ня, і не можуть отри­ма­ти доступ до даних один одного.