localStorage naudojimas vartotojo nustatymuose išsaugoti

Praktinis vadovas, kaip išsaugoti vartotojo pasirinktas temas ir nustatymus naudojant localStorage. Gera pradžia žmonėms, kurie tik pradeda su šia API.

6 min Pradedantysis Liepa 2026

localStorage naudojimas vartotojo nustatymuose išsaugoti, programavimo sąvoka su kláviatūra ir ekranu

Kodėl localStorage yra labai naudingas?

Jei kada nors pastebėjote, kad svetainės pamena jūsų pasirinktas spalvas ar tamsų režimą net po to, kai uždarysite naršyklę — tai localStorage darbas. It's one of the simplest ways to keep user preferences persistent.

localStorage leidžia jums saugoti nedidelius kiekius duomenų tiesiogiai vartotojo naršyklėje. Nereikia jokio serverio, jokių duomenų bazių — tik paprastas JavaScript ir jūs turite galią išsaugoti nustatymus.

Šiame straipsnyje parodysiu, kaip tai veikia praktiškai. Nuo pagrindinės localStorage sintaksės iki pilno temų perjungimo sistemos, kuri atsimena vartotojo pasirinkimus.

Webinė saugykla ir vartotojo nustatymai, kompiuterio ekranas su duomenų saugojimo iliustracija

localStorage bazinė sintaksė

localStorage yra tiesiog objektas, kuris saugoja duomenis kaip raktą ir reikšmę. Saugoti duomenis — paprasta:


                        localStorage.setItem('theme', 'dark');

Gauti duomenis atgal yra dar paprasčiau:


                        const savedTheme = localStorage.getItem('theme');

Ir norite ištrinti? Nėra problemos:


                        localStorage.removeItem('theme');

That's it. Three methods. Tas viskas, ką reikia žinoti norint pradėti. localStorage saugoja duomenis kaip stringus, todėl jei norite saugoti objektus, turite juos konvertuoti į JSON formatą.

Programavimo kodas localStorage metodu ekrane, šaltinis ir sintaksė

Vartotojo nustatymai ir temos perjungimas, programinė sąsaja su mygtukai

Temos saugojimas ir atgaminimas

Dabar į praktiką. Norėsime, kad svetainė prisimintų, ar vartotojas pasirinko tamsų ar šviesos režimą. Štai kaip tai padaryti:

Pirmiausia, turite mygtuką, kuris perjungia temą. Kai jis paspaudžiamas, mes saugome pasirinkimą į localStorage ir taikome CSS klasę dokumentui:


                        document.querySelector('.theme-toggle').addEventListener('click', function() {
                        

                        const currentTheme = localStorage.getItem('theme') || 'light';
                        

                        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                        

                        localStorage.setItem('theme', newTheme);
                        

                        document.documentElement.setAttribute('data-theme', newTheme);
                        

                        });

Tada, kai puslapis įkeliamas, turite patikrinti localStorage ir pritaikyti temą prieš tai, kai naudotojas pamatytų bet ką. Don't make them see the wrong colors flashing — check localStorage iš karto:


                        const savedTheme = localStorage.getItem('theme') || 'light';
                        

                        document.documentElement.setAttribute('data-theme', savedTheme);

Panašūs straipsniai

CSS kintamieji ir temų perjungimas, spalvų sistema

CSS kintamieji ir jų panaudojimas temų perjungimui

Sužinokite, kaip CSS kintamieji leidžia lengvai keisti spalvas ir stilius nekeičiant HTML.

Operacinės sistemos nustatymai tamsus režimas, prefers-color-scheme

Operacinės sistemos nustatymuose pagrįstas tamsus režimas

Kaip naudoti prefers-color-scheme medijos užklausą, kad jūsų svetainė automatiškai pritaikytų sistemą.

Prieinamumas ir kontrastas tamsaus režimo dizaine

Svarbi tema, kurią dažnai pamiršta kūrėjai. Kaip pasirinkti tinkamą kontrastą.

Informacinis pranešimas

Šis straipsnis yra edukacinis išteklius, skirtas padėti suprasti localStorage funkcionalumą ir temų perjungimo diegimą. Kiekviena svetainė yra unikali — jūsų implementacija gali skirtis atsižvelgiant į jūsų poreikius ir technologijų rinkinį. Visuomet testuokite savo kodą skirtingose naršyklėse ir įrenginiuose prieš išdiegiant į produkciją.

JSON duomenys ir sudėtingesnės situacijos

Kartais norite saugoti daugiau nei tik temą. Galbūt norite saugoti kelis nustatymus vienu metu — šriftų dydį, kalbą, pranešimų nustatymus. localStorage saugoja tik stringus, todėl turite konvertuoti objektus į JSON:


                          const userPreferences = {
                          

                          theme: 'dark',
                          

                          fontSize: 'large',
                          

                          language: 'lt'
                          

                          };
                          



                          localStorage.setItem('preferences', JSON.stringify(userPreferences));
                          



                          const saved = JSON.parse(localStorage.getItem('preferences'));

Šis būdas leidžia saugoti ir atkurti sudėtingus nustatymus. Visuomet patikrincite, ar localStorage turi duomenis, prieš bandydami juos parsingti — nullPointerException nėra smagus.

JSON duomenų struktūra ir vartotojo nustatymai, programavimo logika

Naršyklės saugykla ir duomenų valymas, privacy nustatymai

localStorage apribojimai ir saugumas

localStorage nėra tobulas — jis turi ribas. Dauguma naršyklių leidžia saugoti apie 5-10 megabaitų duomenų. Tai pakanka nustatymuose, bet ne dideliam kiekiui informacijos.

Taip pat, localStorage nėra saugus. Jei naudotojas išvalys savo naršyklės cache ir cookies, localStorage duomenys taip pat bus ištrinti. Don't store sensitive information — slaptažodžiai, API raktai ar asmens duomenys neturi būti localStorage. Jei reikia, naudokite serverinę sesiją arba encrypciją.

localStorage veikia tik toje pačioje domenoje. Jei jūsų svetainė yra www.example.com, localStorage duomenys nėra prieinami iš example.com. Tai iš tikrųjų geras dalykas — tai yra saugumo patobulinimas.

Apibendrinimas ir kitos galimybės

localStorage — tai paprasta, bet galingas įrankis, norint išsaugoti vartotojo nustatymus svetainėje. Keturi paprasti metodai (setItem, getItem, removeItem, clear) suteikia jums viską, ką reikia pagrindinėms temoms ir nustatymams.

Jei norite daugiau kontrolės arba didesnio saugojimo, galite išbandyti IndexedDB — labiau galingas, bet sudėtingesnis. Arba, jei norite serverio pusės saugojimo, galite saugoti nustatymus duomenų bazėje. Bet daugumoje atvejų localStorage yra gražus sprendimas.

Pradėkite nuo paprastos temos saugojimo. Kai pradėsite suprasti localStorage veikimą, galite išplėsti jį pagal savo poreikius. Sėkmės!

Norite sužinoti daugiau apie temų perjungimą?

Grįžti į kategoriją