4.2 āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ:

localStorage āĻšāϞ āĻ“āϝāĻŧ⧇āĻŦ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āϝāĻž āĻŦā§āϰāĻžāωāϜāĻžāϰ⧇ āϕ⧀/āĻŽāĻžāύ āĻœā§‹āĻĄāĻŧāĻž āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰāĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ āϤāĻžāĻĻ⧇āϰ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϝāĻž āĻŽāϜāĻžāϰ āϤāĻž āĻšāϞ āϝ⧇ āĻĄā§‡āϟāĻž āĻāĻ•āϟāĻŋ āĻĒ⧇āχāϜ āϰāĻŋāĻĢā§āϰ⧇āĻļ āĻāĻŦāĻ‚ āĻāĻŽāύāĻ•āĻŋ āĻāĻ•āϟāĻŋ āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖ āĻŦā§āϰāĻžāωāϜāĻžāϰ āϰāĻŋāĻ¸ā§āϟāĻžāĻ°ā§āĻŸÂ āĻāϰ āĻĒāϰāĻ“ āϟāĻŋāϕ⧇ āĻĨāĻžāϕ⧇āĨ¤ āφāĻŽāϰāĻž āϖ⧁āĻŦ āĻļā§€āĻ˜ā§āϰāχ āĻ āĻŦāĻŋāĻˇā§Ÿā§‡ āĻŦāĻŋāĻ¸ā§āϤāĻžāϰāĻŋāϤ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻŦāĨ¤ āφāĻŽāĻžāĻĻ⧇āϰ āĻŽāύ⧇ āĻĒā§āϰāĻļā§āύ āφāϏāϤ⧇ āĻĒāĻžāϰ⧇ āĻĄāĻžāϟāĻž āϰāĻžāĻ–āĻžāϰ āϜāĻ¨ā§āϝ āϤ⧋ āχāϤāĻŋāĻŽāĻ§ā§āϝ⧇ āϕ⧁āĻ•āĻŋāϜ āφāϛ⧇. āϤāĻžāĻšāϞ⧇ āφāĻŦāĻžāϰ āĻāĻ‡Â localStorage āĻŦāĻžÂ sessionStorage āĻāϰ āĻĻāϰāĻ•āĻžāϰ āĻ•āĻŋ?
  • āĻ“āϝāĻŧ⧇āĻŦ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟāϗ⧁āϞ⧋ āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻ…āύ⧁āϰ⧋āϧ⧇āϰ āϏāĻžāĻĨ⧇ āϏāĻžāĻ°ā§āĻ­āĻžāϰ⧇ āĻĒāĻžāĻ āĻžāύ⧋ āĻšāϝāĻŧ āύāĻžāĨ¤ āϝ⧇ āĻ•āĻžāϰāϪ⧇, āφāĻŽāϰāĻž āφāϰ⧋ āĻ…āύ⧇āĻ• āĻĄāĻžāϟāĻž āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋ. āĻŦ⧇āĻļāĻŋāϰāĻ­āĻžāĻ— āĻŦā§āϰāĻžāωāϜāĻžāϰ āĻ•āĻŽāĻĒāĻ•ā§āώ⧇ 2 āĻŽā§‡āĻ—āĻžāĻŦāĻžāχāϟ āĻĄā§‡āϟāĻž (āĻŦāĻž āϤāĻžāϰ āĻŦ⧇āĻļāĻŋ) āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧ āĻāĻŦāĻ‚ āϏ⧇āϟāĻŋ āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āϏ⧇āϟāĻŋāĻ‚āϏ āĻĨāĻžāϕ⧇āĨ¤
  • āϏāĻžāĻ°ā§āĻ­āĻžāϰ HTTP āĻšā§‡āĻĄāĻžāϰ⧇āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟāϗ⧁āϞāĻŋāϕ⧇ āĻŽā§āϝāĻžāύāĻŋāĻĒ⧁āϞ⧇āϟ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇ āύāĻžāĨ¤ āϜāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āϰāĻŋāĻĒā§āĻŸā§‡āχ āϏāĻŦāĻ•āĻŋāϛ⧁ āĻ•āϰāĻž āĻšāϝāĻŧ⧇ āĻĨāĻžāϕ⧇āĨ¤
āωāĻ­āϝāĻŧ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āĻāĻ•āχ āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻŦāĻ‚ āĻŦ⧈āĻļāĻŋāĻˇā§āĻŸā§āϝ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇:
  • setItem(key, value) – āĻ¸ā§āĻŸā§‹āϰ āϕ⧀/āĻ­ā§āϝāĻžāϞ⧁ āĻœā§‹āĻĄāĻŧāĻžāĨ¤
  • getItem(key) – āϕ⧀ āĻĻā§āĻŦāĻžāϰāĻž āĻŽāĻžāύ āĻĒāĻžāĻ“ā§ŸāĻžāĨ¤
  • removeItem(key) – āĻ­ā§āϝāĻžāϞ⧁ āĻĻā§āĻŦāĻžāϰāĻž āϕ⧀ āϰāĻŋāĻŽā§āĻ­ āĻ•āϰāĻžāĨ¤
  • clear() – āϏāĻŦāĻ•āĻŋāϛ⧁ āĻŽā§āϛ⧇ āĻĢ⧇āϞāĻžāĨ¤
  • key(index) – āĻāĻ•āϟāĻŋ āύāĻŋāĻĻāĻŋāĻˇā§āϟ āĻ…āĻŦāĻ¸ā§āĻĨāĻžāύ⧇āϰ āϕ⧀ āĻĒāĻžāĻ“ā§ŸāĻžāĨ¤
  • length – āϏāĻžā§āϚāĻŋāϤ āφāχāĻŸā§‡āĻŽ āϏāĻ°ā§āĻŦāĻŽā§‹āϟ āϏāĻ‚āĻ–ā§āϝāĻžāĨ¤

localStorage āĻĄā§‡āĻŽā§‹:

āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡āϰ āĻĄāĻžāϟāĻžāϗ⧁āϞ⧋ āĻŦā§āϰāĻžāωāϜāĻžāϰ⧇āϰ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ āĻŸā§āϝāĻžāĻŦ āφāϰ āωāχāĻ¨ā§āĻĄā§‹āϰ āĻŽāĻ§ā§āϝ⧇ āĻļā§‡ā§ŸāĻžāϰ āĻšā§ŸāĨ¤ āĻāϟāĻŋ āĻŦā§āϰāĻžāωāϜāĻžāϰ āϰāĻŋāĻ¸ā§āϟāĻžāĻ°ā§āϟ āĻāĻŦāĻ‚ āĻāĻŽāύāĻ•āĻŋ OS āϰāĻŋāĻŦ⧁āϟ āĻšāĻ“āϝāĻŧāĻžāϰ āĻĒāϰ⧇āĻ“ āĻĄāĻžāϟāĻžāϰ āĻŽā§‡ā§ŸāĻžāĻĻ āĻļ⧇āώ āĻšā§Ÿ āύāĻžāĨ¤ āωāĻĻāĻžāĻšāϰāĻŖāĻ¸ā§āĻŦāϰ⧂āĻĒ, āύāĻŋāĻšā§‡āϰ āϕ⧋āĻĄāϟāĻŋ āϚāĻžāϞāĻžāύāĨ¤
localStorage.setItem(‘test’, 1);
āĻŦā§āϰāĻžāωāϜāĻžāϰāϟāĻŋ āĻŦāĻ¨ā§āϧ/āϖ⧁āϞ⧁āύ āĻŦāĻž āĻāĻ•āχ āĻĒ⧇āχāϜāϟāĻŋ āĻāĻ•āϟāĻŋ āĻ­āĻŋāĻ¨ā§āύ āωāχāĻ¨ā§āĻĄā§‹āϤ⧇ āϖ⧁āϞ⧁āύ āĻĻ⧇āĻ–āĻŦ⧇āύ āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡āϰ āĻĄāĻžāϟāĻžāϗ⧁āϞ⧋ āĻ āĻŋāĻ•āχ āĻ…ā§āϝāĻžāĻ•ā§āϏ⧇āϏ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāϛ⧇āύāĨ¤ āύāĻŋāĻšā§‡āϰ āϕ⧋āĻĄāϟāĻŋāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āφāĻĒāύāĻŋ āĻšā§‡āĻ• āĻ•āϰ⧇ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤
alert( localStorage.getItem(‘test’) );
āĻĄāĻžāϟāĻž āĻļā§‡ā§ŸāĻžāϰ⧇āϰ āĻ•āĻžāϰāϪ⧇ āφāĻĒāύāĻŋ āϝāĻĻāĻŋ āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡ āϕ⧋āύ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύāĻ“ āĻ•āϰ⧇āύ āϤāĻŦ⧇ āĻ“āχ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύāĻ“ āĻ…āĻ¨ā§āϝ āĻŸā§āϝāĻžāĻŦ āĻŦāĻž āĻŦā§āϰāĻžāωāϜāĻžāϰ⧇ āϚāϞ⧇ āφāϏāĻŦ⧇āĨ¤

āĻ…āĻŦāĻœā§‡āĻ•ā§āĻŸā§‡āϰ āĻŽāϤ⧋ āĻ…ā§āϝāĻžāĻ•ā§āϏ⧇āϏāσ

āφāĻŽāϰāĻž āϚāĻžāχāϞ⧇ āĻ…āĻŦāĻœā§‡āĻ•ā§āĻŸā§‡āϰ āĻŽāϤ⧋ āĻ•āϰ⧇āĻ“ āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡ āĻĄāĻžāϟāĻž get/set āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋāĨ¤ āĻāĻŽāύāĻ•āĻŋ āĻĄāĻžāϟāĻž āĻĄāĻŋāϞāĻŋāϟāĻ“ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋāĨ¤ āϚāϞ⧁āύ āĻĻ⧇āĻ–āĻŋ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻ•āϰāĻŦāĨ¤
// For setting key
localStorage.test = 2;
// For getting key
alert( localStorage.test ); // 2
// For removing key
delete localStorage.test;

āϞ⧁āĻĒ⧇āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āϕ⧀ āĻ…ā§āϝāĻžāĻ•ā§āϏ⧇āϏāσ

āφāĻŽāϰāĻž āχāϤāĻŋāĻŽāĻ§ā§āϝ⧇ āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡āϰ āĻĄāĻžāϟāĻž āĻ•āĻŋ āĻ•āĻ°ā§‡Â set,get,delete āĻ•āϰāĻž āϝāĻžā§Ÿ āϤāĻž āĻĻ⧇āĻ–āϞāĻžāĻŽāĨ¤ āĻāĻ–āύ āĻŽāύ⧇ āĻĒā§āϰāĻļā§āύ āφāϏāϤ⧇ āĻĒāĻžāϰ⧇, āĻ•āĻŋ āĻ•āϰ⧇ āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡āϰ āϏāĻŦāϗ⧁āϞ⧋ āϕ⧀/āĻ­ā§āϝāĻžāϞ⧁ āĻœā§‹āĻĄāĻŧāĻž āĻ…ā§āϝāĻžāĻ•ā§āϏ⧇āϏ āĻ•āϰāĻž āϝāĻžā§Ÿ? āĻĻ⧁āĻ°ā§āĻ­āĻžāĻ—ā§āϝāĻŦāĻļāϤ, āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡āϰ āĻ…āĻŦāĻœā§‡āĻ•ā§āĻŸÂ Iterable āύ⧟āĨ¤ āϤāĻŦ⧇ āĻāĻ•āϟāĻŋ āωāĻĒāĻžāϝāĻŧ āĻšāϞ āĻ…ā§āϝāĻžāϰ⧇āϰ āωāĻĒāϰ āϤāĻžāĻĻ⧇āϰ āϞ⧁āĻĒ āĻ•āϰāĻžāĨ¤
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
alert(`${key}: ${localStorage.getItem(key)}`);
}
āφāϰ⧇āĻ•āϟāĻŋ āωāĻĒāĻžāϝāĻŧ āĻšāĻ˛Â for key in localStorageāϞ⧁āĻĒ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž, āĻ āĻŋāĻ• āϝ⧇āĻŽāύ āφāĻŽāϰāĻž āύāĻŋāϝāĻŧāĻŽāĻŋāϤ āĻ…āĻŦāĻœā§‡āĻ•ā§āĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āĻ•āϰ⧇ āĻĨāĻžāĻ•āĻŋāĨ¤
for(let key in localStorage) {
if (!localStorage.hasOwnProperty(key)) {
continue;
}
alert(`${key}: ${localStorage.getItem(key)}`);
}

āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚āσ

āĻŽāύ⧇ āϰāĻžāĻ–āĻŦ⧇āύ, āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āĻœā§‡āϰ  āϕ⧀ āĻāĻŦāĻ‚ āĻ­ā§āϝāĻžāϞ⧁ āωāĻ­āϝāĻŧāχ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻšāϤ⧇ āĻšāĻŦ⧇āĨ¤ āϝāĻĻāĻŋ āĻ…āĻ¨ā§āϝ āϕ⧋āύ āĻĒā§āϰāĻ•āĻžāϰ āĻšāϝāĻŧ, āϝ⧇āĻŽāύ āĻāĻ•āϟāĻŋ āϏāĻ‚āĻ–ā§āϝāĻž, āĻŦāĻž āĻāĻ•āϟāĻŋ āĻŦāĻ¸ā§āϤ⧁, āĻāϟāĻŋ āĻ¸ā§āĻŦāϝāĻŧāĻ‚āĻ•ā§āϰāĻŋāϝāĻŧāĻ­āĻžāĻŦ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻ āϰ⧂āĻĒāĻžāĻ¨ā§āϤāϰāĻŋāϤ āĻšāϝāĻŧāĨ¤
localStorage.user = {name: “Rajib”};
alert(localStorage.user);
āϝāĻĻāĻŋāĻ“ āφāĻŽāϰāĻžÂ JSON āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰ⧇āĻ“ āĻāϟāĻŋāϕ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋāĨ¤
localStorage.user = JSON.stringify({name: “Rajib”});
let user = JSON.parse( localStorage.user );
alert( user.name );
āĻāĻ›āĻžāĻĄāĻŧāĻžāĻ“ āĻĒ⧁āϰ⧋ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟāϕ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻ•āϰāĻž āϏāĻŽā§āĻ­āĻŦ, āϝ⧇āĻŽāύ āĻĄāĻŋāĻŦāĻžāĻ—āĻŋāĻ‚ āωāĻĻā§āĻĻ⧇āĻļā§āϝ⧇āĨ¤
alert( JSON.stringify(localStorage, null, 2) );
  • āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻ āφāχāĻŸā§‡āĻŽ āϏ⧇āϟ āĻ•āϰāĻž, āϖ⧁āĻœā§‡ āĻŦ⧇āϰ āĻ•āϰāĻž, āĻĄāĻŋāϞāĻŋāϟ āĻ•āϰāĻž āĻāĻŦāĻ‚ āĻ¸ā§āĻŸā§‹āϰ āĻĨ⧇āϕ⧇ āϏāĻŦ āφāχāĻŸā§‡āĻŽ āĻ•ā§āϞāĻŋ⧟āĻžāϰ āĻ•āϰāĻžāĨ¤
    //setting a item on local storage
    localStorage.setItem(“lastname”, “Doe”);
    localStorage.setItem(“firstname”, “John”);
    localStorage.setItem(“age”, “34”);
    //getting a item from local storage
    const age = localStorage.getItem(‘age’);
    //removing a item
    localStorage.removeItem(“lastname”);
    //removing everything from Local Storage
    localStorage.clear();
     
  • āĻāĻ•āϟāĻŋ āĻŦāĻžāϟāύ⧇ āĻ•āϤāĻŦāĻžāϰ āĻ•ā§āϞāĻŋāĻ• āĻšāϞ āĻ—āĻŖāύāĻž āĻ•āϰāĻžāσ
Function showTotalClicks() {
if(typeof(Storage) !== “undefined”) {
if (localStorage.totalClick) {
localStorage.totalClick = Number(localStorage.totalClick)+1;
} else {
localStorage.totalClick = 1;
}
document.getElementById(“result”).innerHTML = “You have clicked the button “ + localStorage.totalClick + ” time(s).”;
}
}
  • localstorage āĻāϰ āϏāĻŦ āφāχāĻŸā§‡āĻŽ āĻĒā§āϰāĻŋāĻ¨ā§āϟāσ
for (var i = 0; i < localStorage.length; i++){
let val = localStorage.getItem(localStorage.key(i));
console.log(val);
}
āĻāĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ ‘āĻ•āĻŋ’ āĻāϰ āĻ­ā§āϝāĻžāϞ⧁āϗ⧁āϞ⧋ āĻāĻ•ā§āϏ⧇āϏ āĻ•āϰ⧇, localStorage.getItem() āĻĢāĻžāĻ‚āĻļāύ āĻĻāĻŋā§Ÿā§‡ āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻ•āĻŋ āĻāϰ āĻŦāĻŋāĻĒāϰ⧀āϤ⧇ āϰāĻžāĻ–āĻž āύāĻŋāĻ°ā§āϧāĻžāϰāĻŋāϤ āĻ­ā§āϝāĻžāϞ⧁ āĻĒāĻžāĻ“ā§ŸāĻž āϝāĻžā§ŸāĨ¤
  • āϕ⧁āĻ•āĻŋ āχāωāϜ āύāĻž āĻ•āϰ⧇ āϕ⧇āύ āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ?
  • āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻāϰ āĻŽā§‡āĻŽāϰāĻŋ āĻ¸ā§āĻĒ⧇āϏ āĻ•āϤ?
  • āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻ āϕ⧋āύ ‘āĻ•āĻŋ’ āĻāϰ āĻŦāĻŋāĻĒāϰ⧀āϤ⧇āϰ āĻ­ā§āϝāĻžāϞ⧁ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āϖ⧁āĻœā§‡ āĻĒāĻžāĻŦ⧇?
  • āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻāϰ āϏāĻŦ āϗ⧁āϞ⧋ āĻ•āĻŋ-āĻ­ā§āϝāĻžāϞ⧁ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰāĨ¤
  • āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āϕ⧋āύ āϕ⧋āύ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝ⧇āϤ⧇ āĻĒāĻžāϰ⧇?
  • āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻāϰ āĻ­ā§āϝāĻžāϞ⧁ āĻ•āĻŋ āχāϟāĻžāϰ⧇āĻŦāϞ?
  • āϞ⧋āĻ•āĻžāϞ āĻ¸ā§āĻŸā§‹āϰ⧇āϜ āĻāϰ āĻ­ā§āϝāĻžāϞāĻŋāĻĄāĻŋāϟāĻŋ āĻ•āϤāĻ•ā§āώāĻŖ āĻĨāĻžāϕ⧇?