Ինչպես օգտագործել localStorage-ը JavaScript-ում

Որպես թխուկների այլընտրանք՝ localStorage-ն ունի ավելի մաքուր աջակցություն JavaScript-ում և շատ հեշտ է աշխատել դրա հետ:

LocalStorage մեխանիզմը տրամադրում է վեբ պահպանման օբյեկտի տեսակ, որը թույլ է տալիս պահպանել և առբերել տվյալները բրաուզերում: Դուք կարող եք պահպանել և մուտք գործել տվյալներ առանց ժամկետանց. տվյալները հասանելի կլինեն նույնիսկ այն բանից հետո, երբ այցելուն կփակի ձեր կայքը:

Դուք սովորաբար մուտք կունենաք localStorage՝ օգտագործելով JavaScript: Փոքր քանակությամբ կոդով դուք կարող եք կառուցել նմուշային նախագիծ, ինչպես միավորների հաշվիչ: Սա ցույց կտա, թե ինչպես կարող եք պահպանել և մուտք գործել մշտական տվյալներ՝ օգտագործելով միայն հաճախորդի կողմի կոդը:

Ի՞նչ է տեղական պահեստը JavaScript-ում:

LocalStorage օբյեկտը վեբ պահեստավորման API-ի մի մասն է, որն աջակցում է վեբ բրաուզերների մեծ մասը: Դուք կարող եք տվյալները պահել որպես բանալի-արժեք զույգեր՝ օգտագործելով localStorage-ը: Եզակի ստեղները և արժեքները պետք է լինեն UTF-16 DOM String ձևաչափով:

Եթե ցանկանում եք պահել օբյեկտներ կամ զանգվածներ, դուք պետք է դրանք փոխարկեք տողերի՝ օգտագործելով JSON.stringify() մեթոդը: Դուք կարող եք պահել մինչև 5 ՄԲ տվյալներ localStorage-ում: Նաև նույն ծագման բոլոր պատուհանները կարող են համօգտագործել այդ կայքի localStorage տվյալները:

Բրաուզերը չի ջնջի այս տվյալները, նույնիսկ երբ օգտատերը փակում է այն: Այն հասանելի կլինի այն կայքէջին, որը ստեղծել է այն հետագա ցանկացած նիստի ընթացքում: Այնուամենայնիվ, դուք չպետք է օգտագործեք localStorage-ը զգայուն տվյալների համար, քանի որ նույն էջում աշխատող այլ սկրիպտներ կարող են մուտք գործել դրան:

localStorage ընդդեմ sessionStorage

LocalStorage և sessionStorage օբյեկտները Web Storage API-ի մի մասն են, որը պահում է բանալի-արժեք զույգերը տեղում: Բոլոր ժամանակակից բրաուզերներն աջակցում են երկուսն էլ: LocalStorage-ի դեպքում տվյալները չեն սպառվում նույնիսկ այն բանից հետո, երբ օգտատերը փակում է իր բրաուզերը: Սա տարբերվում է sessionStorage-ից, որը մաքրում է տվյալները, երբ էջի աշխատաշրջանն ավարտվում է: Էջի աշխատաշրջանն ավարտվում է, երբ փակում եք ներդիրը կամ պատուհանը:

Ինչպե՞ս է աշխատում տեղական պահեստը:

Դուք կարող եք մուտք գործել localStorage գործառույթը Window.localStorage հատկության միջոցով: Այս հատկությունը տրամադրում է մի քանի մեթոդներ, ինչպիսիք են setItem(), getItem() և removeItem(): Դուք կարող եք դրանք օգտագործել բանալին/արժեք զույգերը պահելու, կարդալու և ջնջելու համար:

Ինչպես պահել տվյալները localStorage-ում

Դուք կարող եք տվյալները պահել localStorage-ում՝ օգտագործելով setItem() մեթոդը: Այս մեթոդը ընդունում է երկու արգումենտ՝ բանալին և համապատասխան արժեքը։

window.localStorage.setItem('Python', 'Guido van Rossum');

Այստեղ Python բանալին է, իսկ Guido van Rossumը արժեքը: Եթե ցանկանում եք զանգված կամ առարկա պահել, ապա պետք է այն փոխարկեք տողի։ Դուք կարող եք զանգվածը կամ առարկան վերածել տողի՝ օգտագործելով JSON.stringify() մեթոդը:

window.localStorage.setItem('Python', 'Guido van Rossum');
 
const student = {
    name: "Yuvraj",
    marks: 85,
    subject: "Machine Learning"
}
 
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem('result', JSON.stringify(student));
window.localStorage.setItem('marks', JSON.stringify(scores));

Ինչպես կարդալ տվյալները localStorage-ից

Դուք կարող եք կարդալ տվյալները localStorage-ից՝ օգտագործելով getItem() մեթոդը: Այս մեթոդն ընդունում է բանալին որպես պարամետր և վերադարձնում է արժեքը որպես տող:

let data1 = window.localStorage.getItem('Python');
let data2 = window.localStorage.getItem('result');
 
console.log(data1);
console.log(data2);

Սա արտադրում է հետևյալ արդյունքը.

Guido van Rossum
{"name":"Yuvraj","marks":85,"subject":"Machine Learning"}

Եթե ցանկանում եք արդյունքը տողից օբյեկտի վերածել, ապա պետք է օգտագործեք JSON.parse() մեթոդը:

let data2 = JSON.parse(window.localStorage.getItem('result'));
console.log(data2);

Ինչպես ջնջել localStorage նիստերը

Դուք կարող եք ջնջել localStorage նիստերը՝ օգտագործելով removeItem() մեթոդը: Դուք պետք է բանալին փոխանցեք որպես պարամետր այս մեթոդին՝ բանալին-արժեք զույգը ջնջելու համար: Եթե բանալին գոյություն ունի, մեթոդը կջնջի բանալի-արժեք զույգը, իսկ եթե բանալին գոյություն չունի, մեթոդը ոչինչ չի անի:

window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');

Ինչպես մաքրել բոլոր տարրերը localStorage-ում

Դուք կարող եք մաքրել բոլոր տարրերը տեղական պահեստում՝ օգտագործելով clear() մեթոդը: Այս մեթոդին որևէ պարամետր փոխանցելու կարիք չկա:

window.localStorage.clear();

Ինչպես գտնել տեղական պահեստի երկարությունը

Դուք կարող եք գտնել localStorage-ի երկարությունը՝ օգտագործելով localStorage.length հատկությունը:

let len = localStorage.length;
console.log(len);

Ինչպես ստանալ բանալին տվյալ դիրքում

Դուք կարող եք բանալին ստանալ տվյալ դիրքում՝ օգտագործելով key() մեթոդը: Այս մեթոդն ընդունում է ինդեքսը որպես պարամետր:

let d = localStorage.key(1);
console.log(d);

Key() մեթոդը հիմնականում օգտագործվում է localStorage-ի բոլոր տարրերը պտտելու համար:

Ինչպես շրջել localStorage-ի բոլոր տարրերի միջով

Դուք կարող եք կրկնել բոլոր տարրերը localStorage-ում, օգտագործելով for loop-ը:

for (let i = 0; i < localStorage.length; i++){
    let key = localStorage.key(i);
    let value = localStorage.getItem(key);
    console.log(key, value);
}

Key() մեթոդն ընդունում է ինդեքսը որպես արգումենտ և վերադարձնում է համապատասխան բանալին։ getItem() մեթոդն ընդունում է բանալին որպես արգումենտ և վերադարձնում համապատասխան արժեքը։ Վերջապես, console.log() մեթոդը տպում է բանալի-արժեք զույգը:

Պարզ JavaScript նախագիծ՝ հիմնված localStorage-ի վրա

Հասկանալով դրա հիմնական մեթոդները՝ դուք կարող եք մշակել պարզ JavaScript նախագիծ՝ հիմնված localStorage-ի վրա: Այս նախագծում դուք կստեղծեք միավորների հաշվիչ հավելված, որը կավելացնի և կնվազեցնի միավորների քանակը՝ կոճակի սեղմման համաձայն: Բացի այդ, դուք կիրականացնեք ֆունկցիոնալություն՝ մաքրելու բոլոր տարրերը localStorage-ում:

Ստեղծեք index.html և script.js ֆայլ նոր թղթապանակում և բացեք ֆայլերը ձեր սիրելի կոդի խմբագրիչում: Օգտագործեք հետևյալ HTML կոդը՝ միավորների հաշվիչ հավելվածի համար ինտերֆեյս ստեղծելու համար.

<!DOCTYPE html>
<html>
<body>
    <h1>localStorage in JavaScript</h1>
    <button onclick="increaseCounter()" type="button">Increase Score</button>
    <button onclick="decreaseCounter()" type="button">Decrease Score</button>
    <button onclick="clearCounter()" type="button">Clear localStorage</button>
    <p>Score:</p>
    <p id="score"></p>
    <p>Click on the "Increase Score" button to increase the score count</p>
    <p>Click on the "Decrease Score" button to decrease the score count</p>
    <p>Click on the "Clear localStorage" button to clear the localStorage</p>
    <p>
        You can close the browser tab (or window), and try again.
        You'll see that the data still persists and is not lost even after closing
       the browser.
    </p>
    <script src="script.js"> </script>
</body>
</html>

Այս էջը պարունակում է երեք կոճակ՝ Բարձրացնել միավորը, Նվազեցնել միավորը և Մաքրել տեղային պահեստը: Այս կոճակները համապատասխանաբար կանչում են increaseCounter(), decreaseCounter() և clearCounter() ֆունկցիաները: Օգտագործեք հետևյալ կոդը՝ JavaScript-ի միջոցով միավորների հաշվիչ հավելվածին ֆունկցիոնալություն ավելացնելու համար:

function increaseCounter() {
    var count = Number(window.localStorage.getItem("count"));
    count += 1;
    window.localStorage.setItem("count", count);
    document.getElementById("score").innerHTML = count;
}

increaseCounter() ֆունկցիան առբերում է հաշվարկը՝ օգտագործելով getItem() մեթոդը: Այն փոխակերպում է արդյունքը թվի, քանի որ getItem()-ը վերադարձնում է տող և պահում այն count փոփոխականում։

Առաջին անգամ սեղմելով Բարձրացնել գնահատականը կոճակը կլինի setItem(-ին) ցանկացած զանգից առաջ: Ձեր դիտարկիչը չի գտնի count բանալին localStorage-ում, ուստի այն կվերադարձնի զրոյական արժեք: Քանի որ Number() ֆունկցիան վերադարձնում է 0 զրոյական մուտքագրման համար, այն հատուկ գործի մշակման կարիք չունի: Կոդը կարող է ապահով կերպով մեծացնել հաշվարկի արժեքը՝ նախքան այն պահելը և փաստաթուղթը թարմացնելը՝ նոր արժեքը ցուցադրելու համար:

function decreaseCounter() {
    var count = Number(window.localStorage.getItem("count"));
    count -= 1;
    window.localStorage.setItem("count", count);
    document.getElementById("score").innerHTML = count;
}

decreaseCounter() ֆունկցիան առբերում և ստուգում է տվյալները, ինչպես դա անում է increaseCounter(): Այն նվազեցնում է count փոփոխականը 1-ով, որը կանխադրված է 0:

function clearCounter() {
    window.localStorage.clear();
    document.getElementById("score").innerHTML = "";
}

Վերջապես, clearCounter() ֆունկցիան ջնջում է բոլոր տվյալները localStorage-ից՝ օգտագործելով clear() մեթոդը:

Կատարեք ավելին localStorage-ի հետ

LocalStorage օբյեկտն ունի մի քանի մեթոդներ, այդ թվում՝ setItem(), getItem(), removeItem() և clear(): Թեև localStorage-ը հեշտ է օգտագործել, այն անվտանգ չէ գաղտնի տեղեկատվություն պահելը: Բայց դա լավ ընտրություն է նախագծեր մշակելու համար, որոնք մեծ պահեստ չեն պահանջում և չեն ներառում որևէ զգայուն տեղեկատվություն:

Ցանկանու՞մ եք կառուցել տեղական Պահպանման վրա հիմնված մեկ այլ JavaScript նախագիծ: Ահա հիմնական անելիքների ցանկի հավելվածը, որը կարող եք մշակել՝ օգտագործելով HTML, CSS և JavaScript: