Когато създавате уеб приложение, ще има моменти, когато искате да съхранявате данни поотделно в браузъра на потребителя, но без да позволявате на сървъра (back-end) да има достъп до тях.
Ето защо, ако прочетете тази публикация в блога до края, ще откриете как точно да използвате API за локално съхранение в пълния му потенциал.
Преди известно време работех върху личен проект за уеб приложение, което използва нормален HTML, CSS и JavaScript в предния край. И PHP в задната част. Вече не помня точно какво създавах, но изискваше интензивно използване на запазване на въведени от потребителя данни.
Тогава реших, че е най-добрата идея да използвам MySQL база данни за съхраняване на всички данни, така че създадох съответните таблици, написах заявките и започнах да тествам приложението. Всичко работи добре, но бързо открих, че данните, които записвах, бяха доста безполезни за моята база данни, защото всичко, за което ги използвах, беше да ги покажа на екрана на клиента.
Така че започнах да търся алтернатива и попаднах на уеб страница, наречена javascript.info, която изброява специална страница, препращаща към API за локално съхранение.
API за локално съхранение, както подсказва името, позволява на разработчиците да съхраняват индивидуални данни в браузъра на клиента. Така че само този конкретен клиент може да има достъп до тази част от данните. Дори ако потребителят затвори браузъра или рестартира целия си компютър, данните ще продължат да съществуват.
След като прочетох страницата, мозъкът ми с ADHD стана супер развълнуван и веднага започнах да го кодирам в моето уеб приложение, тествах го и видях, че работи невероятно.
Така че сега нека да разгледаме набързо стратегията за това, което можете да правите с API за локално съхранение
- Добавяне на данни към хранилището
- Извличане на данни от хранилището
- Премахване на данни от хранилището
Добавяне на данни към хранилището
Първата част, разбира се, е добавянето на данни към хранилището, така че нека го направим сега.
Добавянето на данни се извършва чрез метод, наречен „setItem“. Необходими са както ключ, така и стойност.
localStorage.setItem("country", "The Netherlands");
Веднъж добавени, данните ще останат постоянни дори ако затворим браузъра си или рестартираме целия си компютър.
Извличане на данни от хранилището
В примера по-горе споменах, че добавяме данни с помощта на ключ и стойност. Причината за това е, че след като искаме да извлечем конкретна стойност, ние използваме определения от нея ключ, за да я извлечем.
const country = localStorage.getItem("country");
console.log(country); // This should print out "The Netherlands"
Сега не сме изцяло зависими от използването на метода „getItem“. Можем да получим достъп до ключа и чрез достъп до него като обект.
const country = localStorage.country; console.log(country); // This should print out "The Netherlands"
Доста спретнато ха?
Премахване на данни от хранилището
Очевидно съхранението на данни не е пълно без възможност за премахване на данни.
localStorage.removeItem("country");
Точно както при извличането на данните, можем също да ги премахнем, като използваме достъп като обект.
delete localStorage.country;
Забележка
Както ключът, така и стойността могат да бъдат само от низов тип данни. Това означава, че ако добавите число, то автоматично ще се преобразува в низ.
И в случай, че искате да съхраните списък, обект или таблица. Би било най-добре, ако го конвертирате в JSON, преди да го добавите към хранилището. Правите това по следния начин...
const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
localStorage.setItem("numbers", JSON.stringify(numbers));
Така че това е всичко за тази публикация, надявам се, че сте научили нещо от нея и че е достатъчно ясно, за да разберете.
Чувствайте се свободни да оставите коментар, разказвайки колко полезен е бил за вас, или може би дори имате допълнителна информация, която бихте искали да споделите.
Не забравяйте, вашата мечтана кариера е само на една крачка!
Михел вън!
Искате ли да знаете повече? Посетете моя уебсайт на адрес: https://michielarkema.com
