ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಮಾಣಿತ HTML ಟೆಂಪ್ಲೇಟ್ ಆಗಿದ್ದು, ನಾವು JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಚಿಸಲಾದ ವಿಷಯವನ್ನು ತುಂಬಿಸಬಹುದು.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ ಸರಳ ನೋಟ್‌ಪ್ಯಾಡ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ರಚನೆಯನ್ನು ನೀಡಲಾಗಿದೆ, ನಾವು ಮಾಡಬೇಕಾದ ಮೊದಲ ವಿಷಯವೆಂದರೆ ಬಟನ್ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗಾಗಿ ಟ್ರ್ಯಾಕಿಂಗ್ ಅನ್ನು ಒದಗಿಸುವುದು "ಪ್ರವೇಶವನ್ನು ಸೇರಿಸಿ"ಮತ್ತು ಪ್ರವೇಶಕ್ಕಾಗಿ ಪಠ್ಯ ಕ್ಷೇತ್ರಕ್ಕೆ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು ನಮೂದಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ, ಅಂದರೆ, ಗುಂಡಿಯನ್ನು ಒತ್ತಿದ ಕ್ಷಣದಲ್ಲಿ ಅದು ಖಾಲಿಯಾಗಿರಬಾರದು. ಈ ರೀತಿಯ ಏನಾದರೂ:

$("#ಸೇರಿಸು").ಕ್ಲಿಕ್(ಫಂಕ್ಷನ್() (
//ಪಠ್ಯ ಕ್ಷೇತ್ರವು ಖಾಲಿಯಾಗಿದ್ದರೆ
$("#ಎಚ್ಚರಿಕೆ").html(" ಗಮನ!ಪಠ್ಯದಲ್ಲಿ ನಮೂದನ್ನು ನಮೂದಿಸಿ
ಕ್ಷೇತ್ರ.");
ಸುಳ್ಳು ಹಿಂತಿರುಗಿ;
}

ಈ ಕೋಡ್‌ನೊಂದಿಗೆ ನಾವು ಏನು ಮಾಡುತ್ತೇವೆ. ಗುಂಡಿಯನ್ನು ಒತ್ತಿದಾಗ "ಪ್ರವೇಶವನ್ನು ಸೇರಿಸಿ"ಹೊಸ ಪ್ರವೇಶ ಕ್ಷೇತ್ರಕ್ಕೆ ಬಳಕೆದಾರರು ಏನನ್ನಾದರೂ ನಮೂದಿಸಿದ್ದಾರೆಯೇ ಎಂದು ನಾವು ಪರಿಶೀಲಿಸುತ್ತೇವೆ. ಅವನು ಇದನ್ನು ಮಾಡದಿದ್ದರೆ, ನಾವು ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಒದಗಿಸಿದ ಡಿವ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಪ್ರವೇಶದ ಪ್ರವೇಶ ಕ್ಷೇತ್ರವು ಭರ್ತಿಯಾಗಿಲ್ಲ ಎಂದು ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸುತ್ತದೆ ಮತ್ತು ನಂತರ, 1000ms (1 ಸೆಕೆಂಡ್), ಡಿವಿ ಅಂಶ ಮತ್ತು ಅದರ ಪ್ರಕಾರ ಸಂದೇಶ, ಕಣ್ಮರೆಯಾಗುತ್ತದೆ. ಕಾರ್ಯವು ನಂತರ ತಪ್ಪು ಎಂದು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದರ ನಂತರ ಬ್ರೌಸರ್ ಉಳಿದ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಮತ್ತೆ ಹೊಸ ನಮೂದನ್ನು ನಮೂದಿಸಲು ಸಿದ್ಧವಾಗಿದೆ.

ಹೊಸ ಪಟ್ಟಿಯ ಅಂಶವನ್ನು ರಚಿಸುವ ಮೂಲಕ ಪ್ರವೇಶ ಕ್ಷೇತ್ರದಲ್ಲಿ ನಮೂದಿಸಿದ ಮೌಲ್ಯವನ್ನು ಪಟ್ಟಿಯ ಪ್ರಾರಂಭಕ್ಕೆ ಸೇರಿಸುವುದು ನಮ್ಮ ಮುಂದಿನ ಹಂತವಾಗಿದೆ. ಹೀಗಾಗಿ, ಬಳಕೆದಾರರು ಮತ್ತೊಂದು ನಮೂದನ್ನು ಸೇರಿಸಿದಾಗ, ಅದನ್ನು ಯಾವಾಗಲೂ ಯೋಜಿತ ಮಾಡಬೇಕಾದ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಈವೆಂಟ್‌ಗಳ ಪಟ್ಟಿಯ ಆರಂಭದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ. ಇದರ ನಂತರ, ನಾವು ಮಾಡಬೇಕಾಗಿರುವುದು ಸ್ಥಳೀಯ ಶೇಖರಣಾ ಕಾರ್ಯವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ಪಟ್ಟಿಯನ್ನು ಉಳಿಸುವುದು:

// ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪಟ್ಟಿಗೆ ನಮೂದನ್ನು ಸೇರಿಸಿ
$("#todos").prepend("

ನೀವು ಗಮನಿಸಿದಂತೆ, ಇಲ್ಲಿ ಅಸಾಮಾನ್ಯ ಏನೂ ಇಲ್ಲ, jQuery ಕೋಡ್ನ ಪ್ರಮಾಣಿತ ಆವೃತ್ತಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ನಾವು ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸುವ ಸ್ಥಳದಲ್ಲಿ, ನಾವು ಕೀ/ಮೌಲ್ಯ ರೂಪದಲ್ಲಿ ನಾವು ಸಂಗ್ರಹಿಸುತ್ತಿರುವ ಡೇಟಾವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು. ಕೀಲಿಗಾಗಿ ನೀವು ಅನಿಯಂತ್ರಿತ ಹೆಸರನ್ನು ಬಳಸಬಹುದು, ಮತ್ತು ನಾನು ಅದನ್ನು ಹೆಸರಿಸಿದೆ "ಟೊಡೋಸ್", ನಂತರ ನಾವು ನಿಜವಾಗಿ ಮೆಮೊರಿಯಲ್ಲಿ ಏನನ್ನು ಸಂಗ್ರಹಿಸಬೇಕು ಎಂಬುದನ್ನು ಸೂಚಿಸಬೇಕಾಗಿದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಇದು HTML ಮಾರ್ಕ್‌ಅಪ್‌ನ ಸಂಪೂರ್ಣ ಭಾಗವಾಗಿದ್ದು, ಅನುಕ್ರಮದ ಪಟ್ಟಿಯಲ್ಲಿ ಸೇರಿಸಲ್ಪಟ್ಟಿದೆ (ಟ್ಯಾಗ್‌ಗಳ ನಡುವೆ ಇದೆ), ಅದರ ಸಹಾಯದಿಂದ ಬಳಕೆದಾರರು ಹಿಂದೆ ನಮೂದಿಸಿದ ಎಲ್ಲಾ ನಮೂದುಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. jQuery .html() ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ನಮಗೆ ಅಗತ್ಯವಿರುವ ತುಣುಕನ್ನು ನಾವು ಸರಳವಾಗಿ ಹಿಂಪಡೆಯುವುದನ್ನು ಕೋಡ್‌ನಿಂದ ನೀವು ನೋಡಬಹುದು ಮತ್ತು ಕೊನೆಯಲ್ಲಿ, ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಕ್ರಿಯೆಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನಾವು ಫಂಕ್ಷನ್‌ನ ರಿಟರ್ನ್ ಮೌಲ್ಯವನ್ನು ತಪ್ಪು ಎಂದು ಹೊಂದಿಸುತ್ತೇವೆ, ಇದು ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ತಡೆಯುತ್ತದೆ. ಸಲ್ಲಿಸಿದ ಮತ್ತು, ಆದ್ದರಿಂದ, ನಮ್ಮ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡುವುದರಿಂದ.

ಈಗ, ನಮ್ಮ ಬಳಕೆದಾರರು ಈ ಹಿಂದೆ ಹಲವಾರು ನಮೂದುಗಳನ್ನು ಮಾಡಿದ್ದಾರೆ ಎಂದು ಹೇಳೋಣ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ನ ಹೆಚ್ಚಿನ ಸಾಮಾನ್ಯ ಕಾರ್ಯಾಚರಣೆಗಾಗಿ, ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಹಿಂದೆ ಉಳಿಸಿದ ಮಾಹಿತಿಯನ್ನು ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಹೊಂದಿದೆಯೇ ಎಂದು ನಾವು ಪರಿಶೀಲಿಸಬೇಕಾಗಿದೆ ಮತ್ತು ಹಾಗಿದ್ದಲ್ಲಿ, ಅದನ್ನು ಬಳಕೆದಾರರಿಗೆ ಪ್ರದರ್ಶಿಸಿ. ನಮ್ಮ ಪ್ರಮುಖ ಹೆಸರು "ಟೊಡೋಸ್" ಆಗಿರುವುದರಿಂದ, ನಾವು ಅದರ ಅಸ್ತಿತ್ವವನ್ನು ಈ ರೀತಿ ಪರಿಶೀಲಿಸಬೇಕು:

// ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಈಗಾಗಲೇ ಡೇಟಾ ಇದ್ದರೆ, ಅದನ್ನು ಪ್ರದರ್ಶಿಸಿ

}

ಡೇಟಾ ಲಭ್ಯತೆಯನ್ನು ಪರಿಶೀಲಿಸಲು, ನಾವು ನಿಯಮಿತ if ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ ಮತ್ತು ನಾವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸಿದರೆ, ನಾವು ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಿಂದ ಹಿಂಪಡೆದಿದ್ದೇವೆ, ಅದನ್ನು HTML ಮಾರ್ಕ್‌ಅಪ್‌ನಂತೆ ಆದೇಶಿಸದ ಪಟ್ಟಿಯೊಳಗೆ ಇರಿಸುತ್ತೇವೆ, ಇದು ಹಿಂದೆ ನಮೂದಿಸಿದ ನಮೂದುಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಬಳಕೆದಾರ.

ನಿಮ್ಮ ಸರಳ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ನೀವು ಪರಿಶೀಲಿಸಿದರೆ, ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿದ ನಂತರ ಎಲ್ಲವೂ ಸ್ಥಳದಲ್ಲಿ ಉಳಿಯುತ್ತದೆ ಎಂದು ನೀವು ಕಂಡುಕೊಳ್ಳುತ್ತೀರಿ. ಮತ್ತು ಈಗ, ನಾವು ಮಾಡಬೇಕಾದ ಕೊನೆಯ ವಿಷಯವೆಂದರೆ ಬಳಕೆದಾರರು ಅಗತ್ಯವಿದ್ದಲ್ಲಿ, ಅವರ ಎಲ್ಲಾ ನಮೂದುಗಳನ್ನು ಅಳಿಸಬಹುದಾದ ಕಾರ್ಯವನ್ನು ರಚಿಸುವುದು. ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ತೆರವುಗೊಳಿಸುವ ಮೂಲಕ ಮತ್ತು ಮಾಡಿದ ಬದಲಾವಣೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ಮುಂದೆ, ನಾವು ಹಿಂದಿನ ಪ್ರಕರಣದಂತೆ, ಫಂಕ್ಷನ್‌ನ ರಿಟರ್ನ್ ಮೌಲ್ಯವಾಗಿ ತಪ್ಪನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ, ಇದು URL ನಲ್ಲಿ ಹ್ಯಾಶ್ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ( *ಮತ್ತು ಪುಟವನ್ನು ಮೇಲಕ್ಕೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವುದಿಲ್ಲ.):

// ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯ ಸಂಪೂರ್ಣ ಸ್ವಚ್ಛಗೊಳಿಸುವಿಕೆ
window.localStorage.clear();
location.reload();
ಸುಳ್ಳು ಹಿಂತಿರುಗಿ;
});

ಪರಿಣಾಮವಾಗಿ, ನಾವು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ. ಮತ್ತು ಮೇಲಿನ ಎಲ್ಲಾ ತುಣುಕುಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸಿ, ನಾವು ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್ ಅನ್ನು ಪಡೆಯುತ್ತೇವೆ:

$("#ಸೇರಿಸು").ಕ್ಲಿಕ್(ಫಂಕ್ಷನ್() (
var ವಿವರಣೆ = $("#ವಿವರಣೆ").val();
if($("#ವಿವರಣೆ").val() == "") (
$("#ಎಚ್ಚರಿಕೆ").html(" ಗಮನ!ಪ್ರವೇಶವನ್ನು ನಮೂದಿಸಿ
ಪಠ್ಯ ಕ್ಷೇತ್ರ.");
$("#ಎಚ್ಚರಿಕೆ").fadeIn().delay(1000).fadeOut();
ಸುಳ್ಳು ಹಿಂತಿರುಗಿ;
}
$("#todos").prepend("

if(localStorage.getItem("todos")) (
$("#todos").html(localStorage.getItem("todos"));
}

$("#ಕ್ಲಿಯರ್").ಕ್ಲಿಕ್(ಫಂಕ್ಷನ್() (
window.localStorage.clear();
location.reload();
ಸುಳ್ಳು ಹಿಂತಿರುಗಿ;
});

ಬ್ರೌಸರ್ ಬೆಂಬಲ.

HTML5 ವಿವರಣೆಯು ವೆಬ್ ಸ್ಟೋರೇಜ್ ತಂತ್ರಜ್ಞಾನಕ್ಕೆ ಸಾಕಷ್ಟು ಶಕ್ತಿಯುತ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಇದು ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಬ್ರೌಸರ್‌ಗಳು, IE8 ಸಹ ಅಳವಡಿಸಲಾಗಿದೆ. ನೀವು ಇನ್ನೂ ಆಸಕ್ತಿ ಹೊಂದಿದ್ದರೆ ಮಾತ್ರ ಸಮಸ್ಯೆ IE7 ಆಗಿ ಉಳಿದಿದೆ.

ತೀರ್ಮಾನ.

ಅಂತಹ ಸಣ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಸ್ಥಳೀಯ ಶೇಖರಣಾ ಕಾರ್ಯವಿಧಾನವು ಡೇಟಾಬೇಸ್‌ಗಳ ಬಳಕೆಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಬದಲಾಯಿಸಬಹುದು. ಸಣ್ಣ ಪ್ರಮಾಣದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು, ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಪರ್ಯಾಯಗಳನ್ನು ಬಳಸುವುದು ಅನಿವಾರ್ಯವಲ್ಲ.

*ಅನುವಾದಕರ ಟಿಪ್ಪಣಿ.

ಪೋಸ್ಟ್ ವೀಕ್ಷಣೆಗಳು: 475

ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ HTML5 LocalStorage ಕುರಿತು ಕಥೆಯೊಂದಿಗೆ ನಾನು ನಿಮಗೆ ಲೇಖನವನ್ನು ಕಳುಹಿಸಿದ್ದೇನೆ. ನಾವು ಅವನಿಗೆ ನೆಲವನ್ನು ನೀಡುತ್ತೇವೆ.

ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಬಳಸಲು ನಾನು ಸರಳವಾದ ಮತ್ತು ಹೆಚ್ಚು ಅರ್ಥವಾಗುವ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಬರೆಯಲು ಪ್ರಯತ್ನಿಸಿದೆ. ತಂತ್ರಜ್ಞಾನವು ಸ್ವತಃ ಮತ್ತು ಅದರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ವಿಧಾನಗಳು ಸಂಕೀರ್ಣವಾಗಿಲ್ಲ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ ಲೇಖನವು ಸಾಕಷ್ಟು ಚಿಕ್ಕದಾಗಿದೆ. ಪ್ರಾರಂಭಿಸಲು, ನೀವು ಸ್ವಲ್ಪ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ತಿಳಿದುಕೊಳ್ಳಬೇಕು. ಆದ್ದರಿಂದ, ಈ ಲೇಖನದಲ್ಲಿ 10 ನಿಮಿಷಗಳನ್ನು ಕಳೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಪುನರಾರಂಭಕ್ಕೆ "ನಾನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಬಹುದು" ಎಂಬ ಸಾಲನ್ನು ನೀವು ಸುರಕ್ಷಿತವಾಗಿ ಸೇರಿಸಬಹುದು.

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಎಂದರೇನು?

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಬ್ಜೆಕ್ಟ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

Var myCar = (ಚಕ್ರಗಳು: 4, ಬಾಗಿಲುಗಳು: 4, ಎಂಜಿನ್: 1, ಹೆಸರು: "ಜಾಗ್ವಾರ್" )

ಮತ್ತು ಇದು JSON ತೋರುತ್ತಿದೆ. ಸಾಮಾನ್ಯ js ಆಬ್ಜೆಕ್ಟ್‌ನಂತೆಯೇ ಬಹುತೇಕ ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮಾತ್ರ ಉಲ್ಲೇಖಗಳಲ್ಲಿ ಸುತ್ತುವರಿಯಬೇಕು.

( "ಮೊದಲ ಹೆಸರು": "ಇವಾನ್", "ಕೊನೆಯ ಹೆಸರು": "ಇವನೊವ್", "ವಿಳಾಸ": ( "ಸ್ಟ್ರೀಟ್ ವಿಳಾಸ": "ಮಾಸ್ಕೋವ್ಸ್ಕೊಯ್ ಎಸ್., 101, ಸೂಕ್ತ. 101", "ನಗರ": "ಲೆನಿನ್ಗ್ರಾಡ್", "ಪೋಸ್ಟಲ್ ಕೋಡ್": 101101 ), "ಫೋನ್ ಸಂಖ್ಯೆಗಳು": [ "812 123-1234", "916 123-4567" ] )

ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಎಂದರೇನು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಎಲ್ಲೋ ನಾವು ಬಳಸಬಹುದಾದ ಅಂತಹ ವಸ್ತುವನ್ನು ನಿರ್ಮಿಸಲಾಗಿದೆ ಎಂದು ಊಹಿಸಿ. ಅದೇ ಸಮಯದಲ್ಲಿ, ನಾವು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿದರೆ ಅಥವಾ ಬ್ರೌಸರ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮುಚ್ಚಿದರೆ ನಾವು ಅಲ್ಲಿ ಬರೆಯುವ ಮೌಲ್ಯಗಳನ್ನು ಈ ವಸ್ತುವು ತೆರವುಗೊಳಿಸುವುದಿಲ್ಲ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಭಾಷೆಯಲ್ಲಿ, ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಜಾಗತಿಕ ಬ್ರೌಸರ್ ವಸ್ತುವಿನ (ವಿಂಡೋ) ಆಸ್ತಿಯಾಗಿದೆ. ಇದನ್ನು window.localStorage ಅಥವಾ ಸರಳವಾಗಿ ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಆಗಿ ಪ್ರವೇಶಿಸಬಹುದು.

ಬ್ರೌಸರ್ ಸೆಷನ್‌ಸ್ಟೋರೇಜ್ ಎಂಬ ಸ್ಥಳೀಯ ಶೇಖರಣಾ ಕ್ಲೋನ್ ಅನ್ನು ಹೊಂದಿದೆ ಎಂದು ಹೇಳುವುದು ಯೋಗ್ಯವಾಗಿದೆ. ಅವರ ಏಕೈಕ ವ್ಯತ್ಯಾಸವೆಂದರೆ ಎರಡನೆಯದು ಕೇವಲ ಒಂದು ಟ್ಯಾಬ್ (ಸೆಷನ್) ಗಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ ಮತ್ತು ನಾವು ಟ್ಯಾಬ್ ಅನ್ನು ಮುಚ್ಚಿದ ತಕ್ಷಣ ಅದರ ಜಾಗವನ್ನು ಸರಳವಾಗಿ ತೆರವುಗೊಳಿಸುತ್ತದೆ

ಅದನ್ನು ಲೈವ್ ಆಗಿ ನೋಡೋಣ. ಉದಾಹರಣೆಗೆ, Google Chrome ನಲ್ಲಿ ನೀವು DevTools (F12) ಅನ್ನು ತೆರೆಯಬೇಕು, "ಸಂಪನ್ಮೂಲಗಳು" ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ ಮತ್ತು ಎಡ ಫಲಕದಲ್ಲಿ ನೀವು ಈ ಡೊಮೇನ್‌ಗಾಗಿ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಅದು ಒಳಗೊಂಡಿರುವ ಎಲ್ಲಾ ಮೌಲ್ಯಗಳನ್ನು ನೋಡುತ್ತೀರಿ.

ಮೂಲಕ, ಡೊಮೇನ್‌ಗಳೊಂದಿಗೆ ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ತಿಳಿದಿರಬೇಕು. ಪ್ರತಿ ಡೊಮೇನ್‌ಗೆ, ನಿಮ್ಮ ಬ್ರೌಸರ್ ತನ್ನದೇ ಆದ ಸ್ಥಳೀಯ ಶೇಖರಣಾ ವಸ್ತುವನ್ನು ರಚಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಆ ಡೊಮೇನ್‌ನಲ್ಲಿ ಮಾತ್ರ ಸಂಪಾದಿಸಬಹುದು ಅಥವಾ ವೀಕ್ಷಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, mydomain-1.com ಡೊಮೇನ್ ನಿಮ್ಮ mydomain-2.com ನ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಪ್ರವೇಶಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.

ನನಗೆ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಏಕೆ ಬೇಕು?

LocalStorage ಕೇವಲ ಒಂದು ವಿಷಯಕ್ಕೆ ಅಗತ್ಯವಿದೆ - ಬಳಕೆದಾರ ಅವಧಿಗಳ ನಡುವೆ ಕೆಲವು ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು. ಬ್ರೌಸರ್‌ನ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದಾದ ಸಾವಿರ ಮತ್ತು ಒಂದು ವಿಷಯಗಳನ್ನು ನೀವು ಯೋಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಅದನ್ನು ಉಳಿಸುವ ಫೈಲ್ ಆಗಿ ಬಳಸುವ ಬ್ರೌಸರ್ ಆಟಗಳು ಅಥವಾ ವೀಡಿಯೊವನ್ನು ವೀಕ್ಷಿಸುವಾಗ ಬಳಕೆದಾರರು ನಿಲ್ಲಿಸಿದ ಕ್ಷಣವನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ, ಫಾರ್ಮ್‌ಗಳಿಗಾಗಿ ವಿವಿಧ ಡೇಟಾ, ಇತ್ಯಾದಿ.

ಲೋಕಲ್ ಸ್ಟೋರೇಜ್‌ನೊಂದಿಗೆ ನಾನು ಹೇಗೆ ಪ್ರಾರಂಭಿಸುವುದು?

ತುಂಬಾ ಸರಳ.

ಲೋಕಲ್ ಸ್ಟೋರೇಜ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿರುವ ಆಬ್ಜೆಕ್ಟ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಹೋಲುತ್ತದೆ. ಅದರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಹಲವಾರು ವಿಧಾನಗಳಿವೆ.

localStorage.setItem("ಕೀ", "ಮೌಲ್ಯ")

ಸ್ಥಳೀಯ ಸ್ಟೋರೇಜ್‌ಗೆ ಮೌಲ್ಯದೊಂದಿಗೆ ಹೊಸ ಕೀಲಿಯನ್ನು ಸೇರಿಸುವ ವಿಧಾನ (ಮತ್ತು ಅಂತಹ ಕೀ ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೆ, ಅದು ಹೊಸ ಮೌಲ್ಯದೊಂದಿಗೆ ಅದನ್ನು ತಿದ್ದಿ ಬರೆಯುತ್ತದೆ). ನಾವು ಬರೆಯುತ್ತೇವೆ, ಉದಾಹರಣೆಗೆ, localStorage.setItem('myKey', 'myValue');

localStorage.getItem("ಕೀ")

ನಾವು ಕೀ ಸಂಗ್ರಹಣೆಯಿಂದ ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತೇವೆ.

localStorage.removeItem("ಕೀ")

ಕೀಲಿಯನ್ನು ತೆಗೆಯುವುದು

localStorage.clear()

ಎಲ್ಲಾ ಸಂಗ್ರಹಣೆಯನ್ನು ತೆರವುಗೊಳಿಸಲಾಗುತ್ತಿದೆ

ಈಗ ನೀವು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಟ್ಯಾಬ್ ಅನ್ನು ತೆರೆಯಬಹುದು ಮತ್ತು ಈ ಸಂಗ್ರಹಣೆಯಿಂದ ಡೇಟಾವನ್ನು ರೆಕಾರ್ಡಿಂಗ್ ಮತ್ತು ಹಿಂಪಡೆಯುವುದನ್ನು ಅಭ್ಯಾಸ ಮಾಡಬಹುದು. ಏನಾದರೂ ಸಂಭವಿಸಿದಲ್ಲಿ, ನಾವು ಎಲ್ಲಾ ಕೋಡ್ ಅನ್ನು js ಫೈಲ್‌ನಲ್ಲಿ ಬರೆಯುತ್ತೇವೆ.

//ಮೌಲ್ಯವನ್ನು ಸೇರಿಸಿ ಅಥವಾ ಬದಲಾಯಿಸಿ: localStorage.setItem("myKey", "myValue"); //ಈಗ ನೀವು "myValue" ಮೌಲ್ಯದೊಂದಿಗೆ "myKey" ಕೀಯನ್ನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಿರುವಿರಿ //ಇದನ್ನು ಕನ್ಸೋಲ್‌ಗೆ ಔಟ್‌ಪುಟ್ ಮಾಡಿ: var localValue = localStorage.getItem("myKey"); console.log(ಸ್ಥಳೀಯ ಮೌಲ್ಯ); //"myValue" //ತೆಗೆದುಹಾಕು: localStorage.removeItem("myKey"); //ಇಡೀ ಸಂಗ್ರಹಣೆಯನ್ನು ತೆರವುಗೊಳಿಸಿ localStorage.clear() ಅದೇ ವಿಷಯ, ಚದರ ಆವರಣಗಳೊಂದಿಗೆ ಮಾತ್ರ: ಲೋಕಲ್ ಸ್ಟೋರೇಜ್["ಕೀ"] = "ಮೌಲ್ಯ" //ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುವುದು ಲೋಕಲ್ ಸ್ಟೋರೇಜ್["ಕೀ"] //ಮೌಲ್ಯವನ್ನು ಪಡೆಯುವುದು ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಅಳಿಸಿ[" ಕೀ"] // ಮೌಲ್ಯವನ್ನು ತೆಗೆದುಹಾಕಿ

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯು ನೆಸ್ಟೆಡ್ ರಚನೆಗಳೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಾನು ಗಮನಿಸಲು ಬಯಸುತ್ತೇನೆ, ಉದಾಹರಣೆಗೆ, ವಸ್ತುಗಳು.

//ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಿ var obj = (ಐಟಂ1: 1, ಐಟಂ2: , ಐಟಂ 3:"ಹಲೋ" ); var serialObj = JSON.stringify(obj); //ಅದನ್ನು ಧಾರಾವಾಹಿ ಮಾಡಿ localStorage.setItem("myKey", serialObj); // "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) ಕೀ ಬಳಸಿ ಶೇಖರಣೆಗೆ ಬರೆಯಿರಿ //ಅದನ್ನು ವಸ್ತುವಿನಂತೆ ಮತ್ತೆ ಪಾರ್ಸ್ ಮಾಡಿ

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಗಾಗಿ ಬ್ರೌಸರ್‌ಗಳು 5MB ಅನ್ನು ನಿಯೋಜಿಸುತ್ತವೆ ಎಂದು ನೀವು ತಿಳಿದಿರಬೇಕು. ಮತ್ತು ನೀವು ಅದನ್ನು ಮೀರಿದರೆ, ನೀವು QUOTA_EXCEEDED_ERR ವಿನಾಯಿತಿಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತೀರಿ. ಮೂಲಕ, ನಿಮ್ಮ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಇನ್ನೂ ಸ್ಥಳಾವಕಾಶವಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನೀವು ಇದನ್ನು ಬಳಸಬಹುದು.

ಪ್ರಯತ್ನಿಸಿ ( localStorage.setItem("ಕೀ", "ಮೌಲ್ಯ"); ) ಕ್ಯಾಚ್ (ಇ) ( ವೇಳೆ (ಇ == QUOTA_EXCEEDED_ERR) ( ಎಚ್ಚರಿಕೆ("ಮಿತಿ ಮೀರಿದೆ"); ) )

ತೀರ್ಮಾನಕ್ಕೆ ಬದಲಾಗಿ

ಡೆವಲಪರ್‌ಗಳು ಈ ಚಿಕ್ಕ ಲೇಖನದಿಂದ ಸರಳವಾದ ತೀರ್ಮಾನವನ್ನು ಪಡೆಯಲು ನಾನು ಬಯಸುತ್ತೇನೆ, ಈ ತಂತ್ರಜ್ಞಾನವನ್ನು ಈಗಾಗಲೇ ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ ಪೂರ್ಣವಾಗಿ ಬಳಸಬಹುದು. ಇದು ಉತ್ತಮ ಪ್ರಮಾಣೀಕರಣ ಮತ್ತು ಅತ್ಯುತ್ತಮ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ, ಇದು ಕಾಲಾನಂತರದಲ್ಲಿ ಮಾತ್ರ ಅಭಿವೃದ್ಧಿಗೊಳ್ಳುತ್ತದೆ.

ವೆಬ್ ಶೇಖರಣಾ ವಿಮರ್ಶೆ

ಅಂತರ್ಜಾಲದಲ್ಲಿ, ಮಾಹಿತಿಯನ್ನು ಎರಡು ಸ್ಥಳಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು: ವೆಬ್ ಸರ್ವರ್ ಮತ್ತು ವೆಬ್ ಕ್ಲೈಂಟ್ನಲ್ಲಿ (ಅಂದರೆ, ಪುಟ ಸಂದರ್ಶಕರ ಕಂಪ್ಯೂಟರ್). ಕೆಲವು ರೀತಿಯ ಡೇಟಾವನ್ನು ಈ ಸ್ಥಳಗಳಲ್ಲಿ ಒಂದರಲ್ಲಿ ಮತ್ತು ಇತರ ಪ್ರಕಾರಗಳನ್ನು ಇನ್ನೊಂದರಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ.

ಗೌಪ್ಯ ಮತ್ತು ಪ್ರಮುಖ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಸರಿಯಾದ ಸ್ಥಳವೆಂದರೆ ವೆಬ್ ಸರ್ವರ್. ಉದಾಹರಣೆಗೆ, ನೀವು ಆನ್‌ಲೈನ್ ಸ್ಟೋರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್‌ಗೆ ಐಟಂಗಳನ್ನು ಸೇರಿಸಿದರೆ, ನಿಮ್ಮ ಸಂಭಾವ್ಯ ಖರೀದಿಯ ಡೇಟಾವನ್ನು ವೆಬ್ ಸರ್ವರ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ಬಗ್ಗೆ (ಅಥವಾ ಬದಲಿಗೆ, ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಬಗ್ಗೆ) ಮಾಹಿತಿಯನ್ನು ಹೊಂದಿರುವ ಕೆಲವು ಬೈಟ್‌ಗಳ ಟ್ರ್ಯಾಕಿಂಗ್ ಡೇಟಾ ಮಾತ್ರ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಸಂಗ್ರಹವಾಗುತ್ತದೆ ಇದರಿಂದ ವೆಬ್ ಸರ್ವರ್ ಯಾವ ಕಾರ್ಟ್ ನಿಮ್ಮದು ಎಂದು ತಿಳಿಯುತ್ತದೆ. HTML5 ನ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸಹ, ಈ ವ್ಯವಸ್ಥೆಯನ್ನು ಬದಲಾಯಿಸುವ ಅಗತ್ಯವಿಲ್ಲ - ಇದು ವಿಶ್ವಾಸಾರ್ಹ, ಸುರಕ್ಷಿತ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.

ಆದರೆ ಸರ್ವರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಯಾವಾಗಲೂ ಉತ್ತಮ ವಿಧಾನವಲ್ಲ, ಏಕೆಂದರೆ... ಕೆಲವೊಮ್ಮೆ ಬಳಕೆದಾರರ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಅನಗತ್ಯ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರ ಪ್ರಾಶಸ್ತ್ಯಗಳನ್ನು (ಹೇಳಲು, ವೆಬ್ ಪುಟವನ್ನು ಹೇಗೆ ನಿರೂಪಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳು) ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯನ್ನು (ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್) ಸ್ಥಳೀಯವಾಗಿ ಸಂಗ್ರಹಿಸಲು ಇದು ಅರ್ಥಪೂರ್ಣವಾಗಿದೆ, ಇದರಿಂದಾಗಿ ಸಂದರ್ಶಕರು ನಂತರ ಅದೇ ಹಂತದಿಂದ ಅದನ್ನು ಚಲಾಯಿಸುವುದನ್ನು ಮುಂದುವರಿಸಬಹುದು. .

HTML5 ಕ್ಕಿಂತ ಮೊದಲು, ಸ್ಥಳೀಯವಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವ ಏಕೈಕ ಮಾರ್ಗವೆಂದರೆ ಫೈಲ್ ಕಾರ್ಯವಿಧಾನವನ್ನು ಬಳಸುವುದು ಕುಕೀಸ್, ಇದು ಮೂಲತಃ ವೆಬ್ ಸರ್ವರ್‌ಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳ ನಡುವೆ ಸಣ್ಣ ಪ್ರಮಾಣದ ಗುರುತಿಸುವ ಮಾಹಿತಿಯನ್ನು ವಿನಿಮಯ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಕುಕೀಸ್ ಸಣ್ಣ ಪ್ರಮಾಣದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಸೂಕ್ತವಾಗಿದೆ, ಆದರೆ ಅವರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿಯು ಸ್ವಲ್ಪ ಗೊಂದಲಮಯವಾಗಿದೆ. ಕುಕೀ ವ್ಯವಸ್ಥೆಯು ಡೆವಲಪರ್‌ಗೆ ಮುಕ್ತಾಯ ದಿನಾಂಕಗಳೊಂದಿಗೆ ಫಿಡಲ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಪುಟದ ವಿನಂತಿಯೊಂದಿಗೆ ಇಂಟರ್ನೆಟ್‌ನಾದ್ಯಂತ ಡೇಟಾವನ್ನು ಹಿಂದಕ್ಕೆ ಮತ್ತು ಮುಂದಕ್ಕೆ ಕಳುಹಿಸುತ್ತದೆ.

HTML5 ಕುಕೀಗಳಿಗೆ ಉತ್ತಮ ಪರ್ಯಾಯವನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ಇದು ಸಂದರ್ಶಕರ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಲು ಸುಲಭ ಮತ್ತು ಸರಳವಾಗಿಸುತ್ತದೆ. ಈ ಮಾಹಿತಿಯನ್ನು ಕ್ಲೈಂಟ್‌ನ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಅನಿರ್ದಿಷ್ಟವಾಗಿ ಸಂಗ್ರಹಿಸಬಹುದು, ವೆಬ್ ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ (ಡೆವಲಪರ್ ಹಾಗೆ ಮಾಡದ ಹೊರತು), ಗಾತ್ರದಲ್ಲಿ ದೊಡ್ಡದಾಗಿರಬಹುದು ಮತ್ತು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಕೇವಲ ಒಂದೆರಡು ಸರಳ, ಪರಿಣಾಮಕಾರಿ JavaScript ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಬೇಕಾಗುತ್ತವೆ.

ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ ವೆಬ್ ಸಂಗ್ರಹಣೆಮತ್ತು ವಿಶೇಷವಾಗಿ ಆಫ್‌ಲೈನ್ ವೆಬ್‌ಸೈಟ್‌ಗಳೊಂದಿಗೆ ಬಳಸಲು ಸೂಕ್ತವಾಗಿರುತ್ತದೆ, ಏಕೆಂದರೆ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕವಿಲ್ಲದಿದ್ದರೂ ಸಹ ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಮಾಹಿತಿಯನ್ನು ಉಳಿಸಬಹುದಾದ ಸ್ವಯಂಪೂರ್ಣ, ಆಫ್‌ಲೈನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

HTML5 ವೆಬ್ ಶೇಖರಣಾ ಕಾರ್ಯವು ಸಂದರ್ಶಕರ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ವೆಬ್ ಪುಟವನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಈ ಮಾಹಿತಿಯು ಅಲ್ಪಾವಧಿಯದ್ದಾಗಿರಬಹುದು, ನೀವು ಬ್ರೌಸರ್ ಅನ್ನು ಆಫ್ ಮಾಡಿದಾಗ ಅಳಿಸಲಾಗುತ್ತದೆ ಅಥವಾ ದೀರ್ಘಾವಧಿಯವರೆಗೆ, ವೆಬ್ ಪುಟಕ್ಕೆ ನಂತರದ ಭೇಟಿಗಳಲ್ಲಿ ಲಭ್ಯವಿರುತ್ತದೆ.

ವೆಬ್ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಮಾಹಿತಿಯು ವಾಸ್ತವವಾಗಿ ಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲ್ಪಡುವುದಿಲ್ಲ, ಆದರೆ ವೆಬ್ ಪುಟ ಸಂದರ್ಶಕರ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ವೆಬ್ ಸಂಗ್ರಹಣೆ ಎಂದರೆ ಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವುದಿಲ್ಲ, ಆದರೆ ಇಂಟರ್ನೆಟ್‌ನಿಂದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವುದು.

ಎರಡು ವಿಧದ ವೆಬ್ ಸಂಗ್ರಹಣೆಗಳಿವೆ, ಅದು ಹೇಗಾದರೂ ಎರಡು ವಸ್ತುಗಳೊಂದಿಗೆ ಸಂಬಂಧ ಹೊಂದಿದೆ:

ವಸ್ತುವನ್ನು ಬಳಸುತ್ತದೆ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಶಾಶ್ವತ ಆಧಾರದ ಮೇಲೆ ಸಂಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್‌ಗಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು. ಇದರರ್ಥ ವೆಬ್ ಪುಟವು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಿದರೆ, ಮರುದಿನ, ಮುಂದಿನ ವಾರ ಅಥವಾ ಮುಂದಿನ ವರ್ಷ ಆ ವೆಬ್ ಪುಟಕ್ಕೆ ಹಿಂತಿರುಗಿದಾಗ ಆ ಡೇಟಾ ಬಳಕೆದಾರರಿಗೆ ಲಭ್ಯವಾಗುತ್ತದೆ.

ಸಹಜವಾಗಿ, ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್‌ಗಳು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ತೆರವುಗೊಳಿಸುವ ಆಯ್ಕೆಯನ್ನು ಬಳಕೆದಾರರಿಗೆ ಒದಗಿಸುತ್ತವೆ. ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳು ಇದನ್ನು ಎಲ್ಲಾ ಅಥವಾ ಏನೂ ಇಲ್ಲದ ತಂತ್ರವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತವೆ ಮತ್ತು ಕುಕೀಗಳನ್ನು ಅಳಿಸಿದಂತೆ ಎಲ್ಲಾ ಸ್ಥಳೀಯ ಡೇಟಾವನ್ನು ಅಳಿಸುತ್ತವೆ. (ವಾಸ್ತವವಾಗಿ, ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ, ಕುಕೀ ಸಿಸ್ಟಮ್ ಮತ್ತು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯು ಪರಸ್ಪರ ಸಂಪರ್ಕ ಹೊಂದಿದೆ, ಆದ್ದರಿಂದ ಸ್ಥಳೀಯ ಡೇಟಾವನ್ನು ಅಳಿಸುವ ಏಕೈಕ ಮಾರ್ಗವೆಂದರೆ ಕುಕೀಗಳನ್ನು ಅಳಿಸುವುದು.) ಮತ್ತು ಇತರ ಬ್ರೌಸರ್‌ಗಳು ಬಳಕೆದಾರರಿಗೆ ಪ್ರತಿಯೊಂದು ವೆಬ್‌ಸೈಟ್‌ಗೆ ಡೇಟಾವನ್ನು ವೀಕ್ಷಿಸಲು ಮತ್ತು ಡೇಟಾವನ್ನು ಅಳಿಸಲು ಅನುಮತಿಸಬಹುದು. ಆಯ್ದ ಸೈಟ್ ಅಥವಾ ಸೈಟ್‌ಗಳು.

ವಸ್ತುವನ್ನು ಬಳಸುತ್ತದೆ ಅಧಿವೇಶನ ಸಂಗ್ರಹಣೆಒಂದು ಬ್ರೌಸರ್ ವಿಂಡೋ ಅಥವಾ ಟ್ಯಾಬ್‌ಗಾಗಿ ಡೇಟಾದ ತಾತ್ಕಾಲಿಕ ಸಂಗ್ರಹಣೆಗಾಗಿ. ಬಳಕೆದಾರರು ವಿಂಡೋ ಅಥವಾ ಟ್ಯಾಬ್ ಅನ್ನು ಮುಚ್ಚುವವರೆಗೆ ಮಾತ್ರ ಈ ಡೇಟಾ ಲಭ್ಯವಿರುತ್ತದೆ, ಅದರ ನಂತರ ಸೆಷನ್ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಡೇಟಾವನ್ನು ಅಳಿಸಲಾಗುತ್ತದೆ. ಆದರೆ ಬಳಕೆದಾರರು ಮತ್ತೊಂದು ವೆಬ್‌ಸೈಟ್‌ಗೆ ಹೋದರೆ ಮತ್ತು ಅದೇ ಬ್ರೌಸರ್ ವಿಂಡೋದಲ್ಲಿ ನಡೆಯುವವರೆಗೆ ಮತ್ತೆ ಹಿಂತಿರುಗಿದರೆ ಸೆಷನ್ ಡೇಟಾವನ್ನು ಉಳಿಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ.

ವೆಬ್ ಪುಟ ಕೋಡ್ ದೃಷ್ಟಿಕೋನದಿಂದ, ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಸೆಷನ್ ಡೇಟಾ ಸಂಗ್ರಹಣೆ ಎರಡೂ ಒಂದೇ ರೀತಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಡೇಟಾ ಸಂಗ್ರಹಣೆಯ ಅವಧಿ ಮಾತ್ರ ವ್ಯತ್ಯಾಸವಾಗಿದೆ.

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಬಳಸುವುದು ಬಳಕೆದಾರರಿಂದ ವೆಬ್ ಪುಟಕ್ಕೆ ನಂತರದ ಭೇಟಿಗಳಿಗೆ ಅಗತ್ಯವಾದ ಮಾಹಿತಿಯನ್ನು ಉಳಿಸಲು ಉತ್ತಮ ಅವಕಾಶವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಮತ್ತು ಒಂದು ಪುಟದಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ವರ್ಗಾಯಿಸಬೇಕಾದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಸೆಷನ್ ಸ್ಟೋರ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. (ಸೆಷನ್ ಸ್ಟೋರೇಜ್ ಒಂದು ಪುಟದಲ್ಲಿ ಮಾತ್ರ ಬಳಸಲಾಗುವ ತಾತ್ಕಾಲಿಕ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು, ಆದರೆ ಸಾಮಾನ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೇರಿಯಬಲ್‌ಗಳು ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.)

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಅಧಿವೇಶನ ಸಂಗ್ರಹಣೆ ಎರಡೂ ವೆಬ್‌ಸೈಟ್ ಡೊಮೇನ್‌ನೊಂದಿಗೆ ಸಂಬಂಧ ಹೊಂದಿವೆ. ಹೀಗಾಗಿ, ನೀವು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ www..html ಪುಟಕ್ಕಾಗಿ ಡೇಟಾವನ್ನು ಉಳಿಸಿದರೆ, ಈ ಡೇಟಾವು www..html ಪುಟಕ್ಕೆ ಲಭ್ಯವಿರುತ್ತದೆ, ಏಕೆಂದರೆ ಈ ಎರಡೂ ಪುಟಗಳು ಒಂದೇ ಡೊಮೇನ್ ಅನ್ನು ಹೊಂದಿವೆ. ಆದರೆ ಇತರ ಡೊಮೇನ್‌ಗಳಲ್ಲಿನ ಪುಟಗಳಿಗೆ ಈ ಡೇಟಾ ಲಭ್ಯವಿರುವುದಿಲ್ಲ.

ಜೊತೆಗೆ, ಏಕೆಂದರೆ ವೆಬ್ ಸಂಗ್ರಹಣೆಯು ನಿರ್ದಿಷ್ಟ ಬಳಕೆದಾರರ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿದೆ (ಅಥವಾ ಮೊಬೈಲ್ ಸಾಧನ), ಅದು ಆ ಕಂಪ್ಯೂಟರ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿದೆ ಮತ್ತು ಆ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ತೆರೆಯಲಾದ ವೆಬ್ ಪುಟ ಮತ್ತು ಅದರ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಮತ್ತೊಂದು ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿರುವ ಮಾಹಿತಿಗೆ ಪ್ರವೇಶವನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ . ಅಂತೆಯೇ, ನೀವು ಬೇರೆ ಬಳಕೆದಾರಹೆಸರಿನೊಂದಿಗೆ ಲಾಗ್ ಇನ್ ಮಾಡಿದರೆ ಅಥವಾ ಬೇರೆ ಬ್ರೌಸರ್ ಅನ್ನು ಚಲಾಯಿಸಿದರೆ ವೆಬ್ ಪುಟವು ಪ್ರತ್ಯೇಕ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ರಚಿಸುತ್ತದೆ.

HTML5 ವಿವರಣೆಯು ಗರಿಷ್ಠ ಸಂಗ್ರಹಣೆಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಯಾವುದೇ ಕಠಿಣ ಮತ್ತು ವೇಗದ ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸದಿದ್ದರೂ, ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್‌ಗಳು ಅದನ್ನು 5 MB ಗೆ ಮಿತಿಗೊಳಿಸುತ್ತವೆ. ಈ ಪರಿಮಾಣದಲ್ಲಿ ನೀವು ಸಾಕಷ್ಟು ಡೇಟಾವನ್ನು ಪ್ಯಾಕ್ ಮಾಡಬಹುದು, ಆದರೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ನೀವು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಮತ್ತು ಅದರಲ್ಲಿ ದೊಡ್ಡ ಪ್ರಮಾಣದ ಚಿತ್ರಗಳು ಅಥವಾ ವೀಡಿಯೊಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಬಯಸಿದರೆ ಅದು ಸಾಕಾಗುವುದಿಲ್ಲ (ಮತ್ತು, ನಿಜವಾಗಿ, ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿಲ್ಲ ಅಂತಹ ಉದ್ದೇಶಗಳು).

ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವುದಕ್ಕಾಗಿ, ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ ಡೇಟಾಬೇಸ್ ಮಾನದಂಡ IndexedDBಹೆಚ್ಚು ದೊಡ್ಡ ಪ್ರಮಾಣದ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ - ಸಾಮಾನ್ಯವಾಗಿ 50 MB ಯಿಂದ ಪ್ರಾರಂಭಿಸಲು ಮತ್ತು ಬಳಕೆದಾರನು ಒಪ್ಪಿದರೆ ಇನ್ನಷ್ಟು.

ಡೇಟಾವನ್ನು ಉಳಿಸಲಾಗುತ್ತಿದೆ

ಮಾಹಿತಿಯ ತುಣುಕನ್ನು ಸ್ಥಳೀಯ ಅಥವಾ ಅಧಿವೇಶನ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಇರಿಸುವ ಮೊದಲು, ಅದಕ್ಕೆ ವಿವರಣಾತ್ಮಕ ಹೆಸರನ್ನು ನೀಡಬೇಕು. ಈ ಹೆಸರನ್ನು ಕೀ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಭವಿಷ್ಯದಲ್ಲಿ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯಲು ಇದು ಅಗತ್ಯವಿದೆ.

ಡೇಟಾದ ತುಣುಕನ್ನು ಉಳಿಸಲು ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ = ಡೇಟಾ;

// JS localStorage["ಬಳಕೆದಾರಹೆಸರು"] = "ಇವಾನ್ ಪೆಟ್ರೋವ್";

ಸಹಜವಾಗಿ, ಸ್ಥಿರ ಪಠ್ಯದ ತುಣುಕನ್ನು ಉಳಿಸುವುದರಲ್ಲಿ ಅರ್ಥವಿಲ್ಲ. ವಿಶಿಷ್ಟವಾಗಿ, ಪ್ರಸ್ತುತ ದಿನಾಂಕ, ಗಣಿತದ ಲೆಕ್ಕಾಚಾರದ ಫಲಿತಾಂಶ ಅಥವಾ ಫಾರ್ಮ್ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಬಳಕೆದಾರರು ನಮೂದಿಸಿದ ಪಠ್ಯ ಡೇಟಾದಂತಹ ಕೆಲವು ರೀತಿಯ ವೇರಿಯಬಲ್ ಡೇಟಾವನ್ನು ನಾವು ಸಂಗ್ರಹಿಸಬೇಕಾಗುತ್ತದೆ. ಬಳಕೆದಾರ-ನಮೂದಿಸಿದ ಪಠ್ಯ ಡೇಟಾವನ್ನು ಉಳಿಸಲು ಕೆಳಗಿನ ಉದಾಹರಣೆಯಾಗಿದೆ:

ಫಂಕ್ಷನ್ saveData() ( // ಪಠ್ಯ ಕ್ಷೇತ್ರಗಳ ಮೌಲ್ಯಗಳನ್ನು ಪಡೆಯಿರಿ var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // ನಮೂದಿಸಿದ ಪಠ್ಯವನ್ನು ಉಳಿಸಿ ಪಠ್ಯ ಕ್ಷೇತ್ರದಲ್ಲಿ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ["localData"] = ಸ್ಥಳೀಯ ಡೇಟಾ; ಸಂಗ್ರಹಣೆಯಿಂದ var localData = ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ["localData"]; var sessionData = sessionStorage["sessionData"]; // ಈ ಡೇಟಾವನ್ನು ಪಠ್ಯ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿ ;

ಪುಟವು ಎರಡು ಪಠ್ಯ ಕ್ಷೇತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿದೆ: ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಗಾಗಿ (ಮೇಲ್ಭಾಗದಲ್ಲಿ) ಮತ್ತು ಅಧಿವೇಶನ ಸಂಗ್ರಹಣೆಗಾಗಿ (ಕೆಳಭಾಗದಲ್ಲಿ). "ಉಳಿಸು" ಗುಂಡಿಯನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಪಠ್ಯ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ನಮೂದಿಸಲಾದ ಪಠ್ಯವನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು "ಲೋಡ್" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಅನುಗುಣವಾದ ಉಳಿಸಿದ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ವೆಬ್ ಸಂಗ್ರಹಣೆಯು ಕಡಿಮೆ ಸಾಮಾನ್ಯ ಆಸ್ತಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಸಹ ಬೆಂಬಲಿಸುತ್ತದೆ. ಈ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ನಿಯಮಗಳ ಪ್ರಕಾರ, ನಾವು ಶೇಖರಣಾ ಸ್ಥಳವನ್ನು ಸ್ಥಳೀಯ ಸ್ಟೋರೇಜ್ ["ಬಳಕೆದಾರಹೆಸರು"] ಎಂದು ಕರೆಯುವ ಬದಲಿಗೆ ಸ್ಥಳೀಯ ಸ್ಟೋರೇಜ್. ಬಳಕೆದಾರಹೆಸರು ಎಂದು ಹೆಸರಿಸುತ್ತೇವೆ. ಎರಡೂ ವಿಧದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸಮಾನವಾಗಿರುತ್ತದೆ ಮತ್ತು ಒಂದು ಅಥವಾ ಇನ್ನೊಂದನ್ನು ಬಳಸುವುದು ವೈಯಕ್ತಿಕ ಆದ್ಯತೆಯ ವಿಷಯವಾಗಿದೆ.

ವೆಬ್ ಸರ್ವರ್ ಇಲ್ಲದೆ ವೆಬ್ ಸಂಗ್ರಹಣೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ

ನಿಮ್ಮ ವೆಬ್ ಸಂಗ್ರಹಣೆ ಸಂಶೋಧನೆಯಲ್ಲಿ, ನೀವು ಅನಿರೀಕ್ಷಿತ ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸಬಹುದು. ಅನೇಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ, ವೆಬ್ ಸರ್ವರ್ ಒದಗಿಸಿದ ಪುಟಗಳಿಗೆ ಮಾತ್ರ ವೆಬ್ ಸಂಗ್ರಹಣೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಇಂಟರ್ನೆಟ್ ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಸರ್ವರ್ ಎಲ್ಲಿದೆ ಎಂಬುದು ಮುಖ್ಯವಲ್ಲ, ಸ್ಥಳೀಯ ಹಾರ್ಡ್ ಡ್ರೈವಿನಿಂದ ಪುಟಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲಾಗಿಲ್ಲ (ಉದಾಹರಣೆಗೆ, ಪುಟ ಫೈಲ್ ಐಕಾನ್ ಅನ್ನು ಡಬಲ್ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ) ಅತ್ಯಂತ ಮುಖ್ಯವಾದ ವಿಷಯ.

ಈ ವೈಶಿಷ್ಟ್ಯವು ಬ್ರೌಸರ್‌ಗಳು ಸ್ಥಳೀಯ ಶೇಖರಣಾ ಸ್ಥಳವನ್ನು ನಿಯೋಜಿಸುವ ವಿಧಾನದ ಅಡ್ಡ ಪರಿಣಾಮವಾಗಿದೆ. ಹಿಂದೆ ಹೇಳಿದಂತೆ, ಬ್ರೌಸರ್‌ಗಳು ಪ್ರತಿ ವೆಬ್‌ಸೈಟ್‌ನ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು 5MB ಗೆ ಮಿತಿಗೊಳಿಸುತ್ತವೆ, ಇದು ವೆಬ್‌ಸೈಟ್‌ನ ಡೊಮೇನ್‌ನೊಂದಿಗೆ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಬಳಸಲು ಬಯಸುವ ಪ್ರತಿ ಪುಟವನ್ನು ಸಂಯೋಜಿಸುವ ಅಗತ್ಯವಿದೆ.

ನಿಮ್ಮ ಸ್ಥಳೀಯ ಹಾರ್ಡ್ ಡ್ರೈವ್‌ನಿಂದ ವೆಬ್ ಸಂಗ್ರಹಣೆಯನ್ನು ಬಳಸುವ ಪುಟವನ್ನು ನೀವು ತೆರೆದರೆ ಏನಾಗುತ್ತದೆ? ಇದು ಎಲ್ಲಾ ಬ್ರೌಸರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ವೆಬ್ ಸಂಗ್ರಹಣೆಯ ಬೆಂಬಲವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕಳೆದುಕೊಳ್ಳುತ್ತಿರುವಂತೆ ತೋರುತ್ತಿದೆ. ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಮತ್ತು ಸೆಶನ್ ಸ್ಟೋರೇಜ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಕಣ್ಮರೆಯಾಗುತ್ತವೆ ಮತ್ತು ಅವುಗಳನ್ನು ಬಳಸಲು ಪ್ರಯತ್ನಿಸುವುದರಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷ ಉಂಟಾಗುತ್ತದೆ.

ಫೈರ್‌ಫಾಕ್ಸ್‌ನಲ್ಲಿ, ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ ಮತ್ತು ಸೆಶನ್‌ಸ್ಟೋರೇಜ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಸ್ಥಳದಲ್ಲಿಯೇ ಇರುತ್ತವೆ ಮತ್ತು ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂದು ತೋರುತ್ತದೆ (ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸಲಾಗಿದೆ ಎಂದು ಮಾಡರ್ನಿಜರ್ ಸಹ ನಿರ್ಧರಿಸುತ್ತದೆ), ಆದರೆ ಶೇಖರಣೆಗೆ ಕಳುಹಿಸಲಾದ ಎಲ್ಲವೂ ಎಲ್ಲಿ ಮರೆಯಾಗುತ್ತದೆ ಎಂಬುದು ದೇವರಿಗೆ ತಿಳಿದಿದೆ. ಕ್ರೋಮ್ ಬ್ರೌಸರ್ ಮತ್ತೆ ವಿಭಿನ್ನವಾಗಿದೆ - ಹೆಚ್ಚಿನ ವೆಬ್ ಸ್ಟೋರೇಜ್ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳು ಅದರಂತೆಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ ಕೆಲವು ವೈಶಿಷ್ಟ್ಯಗಳು (ಆನ್‌ಸ್ಟೋರೇಜ್ ಈವೆಂಟ್‌ನಂತಹವು) ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

ಫೈಲ್ API ಅನ್ನು ಬಳಸುವಾಗ ಇದೇ ರೀತಿಯ ಸಮಸ್ಯೆಗಳು ಉದ್ಭವಿಸುತ್ತವೆ. ಆದ್ದರಿಂದ ಈ ಎಲ್ಲಾ ಅನಿಶ್ಚಿತತೆಗಳನ್ನು ತಪ್ಪಿಸಲು ನೀವು ಪರೀಕ್ಷಿಸುತ್ತಿರುವ ಪುಟವನ್ನು ಪರೀಕ್ಷಾ ಸರ್ವರ್‌ನಲ್ಲಿ ಇರಿಸಿದರೆ ನೀವು ಬಹಳಷ್ಟು ಜಗಳವನ್ನು ಉಳಿಸುತ್ತೀರಿ.

ವೆಬ್ ಸಂಗ್ರಹಣೆಗಾಗಿ ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಪ್ರತಿ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಉತ್ತಮ ಮಟ್ಟದ ಬೆಂಬಲದೊಂದಿಗೆ ವೆಬ್ ಸಂಗ್ರಹಣೆಯು HTML5 ನ ಹೆಚ್ಚು ಬೆಂಬಲಿತ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಕೆಳಗಿನ ಕೋಷ್ಟಕವು ವೆಬ್ ಸಂಗ್ರಹಣೆಯನ್ನು ಬೆಂಬಲಿಸುವ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳ ಕನಿಷ್ಠ ಆವೃತ್ತಿಗಳನ್ನು ತೋರಿಸುತ್ತದೆ:

ಈ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಸೆಷನ್ ಡೇಟಾ ಸಂಗ್ರಹಣೆ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಆದರೆ onStorage ಈವೆಂಟ್‌ಗೆ ಬೆಂಬಲವು IE 9, Firefox 4, ಅಥವಾ Chrome 6 ನಂತಹ ಬ್ರೌಸರ್‌ಗಳ ನಂತರದ ಆವೃತ್ತಿಗಳ ಅಗತ್ಯವಿದೆ.

ಅತ್ಯಂತ ಸಮಸ್ಯಾತ್ಮಕ ಆವೃತ್ತಿಯು IE 7 ಆಗಿದೆ, ಇದು ವೆಬ್ ಸಂಗ್ರಹಣೆಯನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಪರಿಹಾರವಾಗಿ, ನೀವು ಕುಕೀಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವೆಬ್ ಸಂಗ್ರಹಣೆಯನ್ನು ಅನುಕರಿಸಬಹುದು. ಇದು ನಿಖರವಾಗಿ ಪರಿಪೂರ್ಣ ಪರಿಹಾರವಲ್ಲ, ಆದರೆ ಅದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಈ ಅಂತರವನ್ನು ಮುಚ್ಚಲು ಯಾವುದೇ ಅಧಿಕೃತ ಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದಿದ್ದರೂ, HTML5 ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಪುಟದಲ್ಲಿ ("ವೆಬ್ ಸ್ಟೋರೇಜ್" ಅಡಿಯಲ್ಲಿ) ಕೆಲವು ಉತ್ತಮ ಆರಂಭಿಕ ಬಿಂದುಗಳನ್ನು ಕಾಣಬಹುದು.

ಬ್ರೌಸರ್ನಲ್ಲಿ ನೇರವಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವುದು ಅನೇಕ ಪ್ರಯೋಜನಗಳನ್ನು ಹೊಂದಿದೆ, ಮುಖ್ಯವಾದದ್ದು "ಡೇಟಾಬೇಸ್" ಗೆ ವೇಗವಾದ ಮತ್ತು ನೆಟ್ವರ್ಕ್-ಸ್ವತಂತ್ರ ಪ್ರವೇಶವಾಗಿದೆ. ಇದಕ್ಕಾಗಿ ಪ್ರಸ್ತುತ 4 ಸಕ್ರಿಯ ವಿಧಾನಗಳಿವೆ (ಜೊತೆಗೆ ಒಂದು ಅಸಮ್ಮತಿಸಲಾಗಿದೆ):

1. ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ
2. ಸೆಷನ್ ಸಂಗ್ರಹಣೆ
3. IndexedDB
4. WebSQL (ಅಸಮ್ಮತಿಗೊಳಿಸಲಾಗಿದೆ)

ಕುಕೀಸ್

ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಸರಳವಾದ ಸ್ಟ್ರಿಂಗ್ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಕುಕೀಗಳು ಒಂದು ಶ್ರೇಷ್ಠ ಮಾರ್ಗವಾಗಿದೆ. ವಿಶಿಷ್ಟವಾಗಿ, ಕುಕೀಗಳನ್ನು ಸರ್ವರ್‌ನಿಂದ ಕ್ಲೈಂಟ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ, ಅದು ಅವುಗಳನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು ಮತ್ತು ನಂತರದ ವಿನಂತಿಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಅವುಗಳನ್ನು ಸರ್ವರ್‌ಗೆ ಹಿಂತಿರುಗಿಸಬಹುದು. ಖಾತೆಯ ಅವಧಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಅಥವಾ ಬಳಕೆದಾರರ ಮಾಹಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವಂತಹ ವಿಷಯಗಳಿಗೆ ಇದನ್ನು ಬಳಸಬಹುದು.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ಕ್ಲೈಂಟ್ ಬದಿಯಲ್ಲಿ ಡೇಟಾವನ್ನು ಸರಳವಾಗಿ ಸಂಗ್ರಹಿಸಲು ಕುಕೀಗಳನ್ನು ಬಳಸಬಹುದು. ಆದ್ದರಿಂದ, ಬಳಕೆದಾರರ ಸೆಟ್ಟಿಂಗ್‌ಗಳಂತಹ ಸಾಮಾನ್ಯ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಅವುಗಳನ್ನು ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.

ಕುಕೀಗಳೊಂದಿಗೆ ಮೂಲಭೂತ CRUD ಕಾರ್ಯಾಚರಣೆಗಳು

// document.cookie ರಚಿಸಿ = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // ಓದಿ (ಎಲ್ಲಾ) console.log(document.cookie); // updated document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun; expires=Thu, 01 ಜನವರಿ 1970 00:00:01 GMT";

ಕುಕೀಗಳ ಪ್ರಯೋಜನಗಳು

• ಸರ್ವರ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಅವುಗಳನ್ನು ಬಳಸಬಹುದು
• ಕುಕೀಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಳಿಸುವ ಬದಲು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅವಧಿ ಮುಗಿಯುವಂತೆ ನಾವು ಹೊಂದಿಸಬಹುದು.

ಕುಕೀಗಳ ಅನಾನುಕೂಲಗಳು

• ಅವುಗಳನ್ನು ಡಾಕ್ಯುಮೆಂಟ್ ಪುಟದ ಲೋಡಿಂಗ್‌ಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ
• ಅವರು ಸಣ್ಣ ಪ್ರಮಾಣದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು
• ಅವರು ತಂತಿಗಳನ್ನು ಮಾತ್ರ ಹೊಂದಿರಬಹುದು.
• ಸಂಭಾವ್ಯ ಭದ್ರತಾ ಸಮಸ್ಯೆಗಳು.
• ವೆಬ್ ಸ್ಟೋರೇಜ್ API (ಸ್ಥಳೀಯ ಮತ್ತು ಅಧಿವೇಶನ ಸಂಗ್ರಹಣೆ) ಬಂದ ನಂತರ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಈ ವಿಧಾನವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿಲ್ಲ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಎಲ್ಲಾ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕುಕೀಗಳು ಮೂಲಭೂತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ.

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯು ವೆಬ್ ಸ್ಟೋರೇಜ್ API ಯ ಉಪವಿಭಾಗವಾಗಿದೆ, ಪ್ರಮುಖ ಮೌಲ್ಯದ ಸ್ವರೂಪದಲ್ಲಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ವಿಶೇಷ API. ಈ API ಅನ್ನು ಕುಕೀ ಸಮಸ್ಯೆಗಳಿಗೆ ಪರಿಹಾರವಾಗಿ ರಚಿಸಲಾಗಿದೆ ಮತ್ತು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸರಳ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಹೆಚ್ಚು ಅರ್ಥಗರ್ಭಿತ ಮತ್ತು ಸುರಕ್ಷಿತ ಮಾರ್ಗವಾಗಿದೆ.

ತಾಂತ್ರಿಕವಾಗಿ ನಾವು ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಮಾತ್ರ ಸಂಗ್ರಹಿಸಬಹುದಾದರೂ, ಇದನ್ನು JSON ಗೆ ಪರಿವರ್ತಿಸುವ ಮೂಲಕ ನಿವಾರಿಸಲಾಗಿದೆ. ಈ ರೀತಿಯಾಗಿ ನಾವು ಕುಕೀಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು.

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯೊಂದಿಗೆ ಮೂಲಭೂತ CRUD ಕಾರ್ಯಾಚರಣೆಗಳು

// const ಬಳಕೆದಾರರನ್ನು ರಚಿಸಿ = (ಹೆಸರು: "Ire Aderinokun", ವಯಸ್ಸು: 25 ) localStorage.setItem("ಬಳಕೆದಾರ", JSON.stringify(ಬಳಕೆದಾರ)); // ಓದಿ (ಏಕ) console.log(JSON.parse(localStorage.getItem("user"))) // ನವೀಕರಿಸಿದ const updatedUser = (ಹೆಸರು: "Ire Aderinokun", ವಯಸ್ಸು: 24 ) localStorage.setItem("ಬಳಕೆದಾರ", JSON.stringify(updatedUser)); // localStorage.removeItem ("ಬಳಕೆದಾರ") ಅಳಿಸಿ;

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯ ಪ್ರಯೋಜನಗಳು

• ಸರಳವಾದ ಮತ್ತು ಹೆಚ್ಚು ಅರ್ಥಗರ್ಭಿತ ಡೇಟಾ ಶೇಖರಣಾ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ನೀಡುತ್ತದೆ.
• ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಹೆಚ್ಚು ಸುರಕ್ಷಿತವಾಗಿದೆ.
• ಹೆಚ್ಚಿನ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ (ಎಲ್ಲಾ 3 ಅಂಕಗಳು - ಕುಕೀಗಳಿಗೆ ಹೋಲಿಸಿದರೆ).

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯ ಅನಾನುಕೂಲಗಳು

• ತಂತಿಗಳನ್ನು ಮಾತ್ರ ಸಂಗ್ರಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ

ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಸೆಷನ್ ಸಂಗ್ರಹಣೆ

ಸೆಷನ್ ಸಂಗ್ರಹಣೆಯು ಎರಡನೇ ವಿಧದ ವೆಬ್ ಸ್ಟೋರೇಜ್ API ಆಗಿದೆ. ಡೇಟಾವನ್ನು ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಸೆಷನ್‌ಗಾಗಿ ಮಾತ್ರ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಹೊರತುಪಡಿಸಿ ಇದು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಂತೆಯೇ ಇರುತ್ತದೆ. ಬಳಕೆದಾರರು ಪುಟದಿಂದ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದ ತಕ್ಷಣ ಮತ್ತು ಬ್ರೌಸರ್ ಅನ್ನು ಮುಚ್ಚಿದ ತಕ್ಷಣ, ಡೇಟಾವನ್ನು ತೆರವುಗೊಳಿಸಲಾಗುತ್ತದೆ.

ಅಧಿವೇಶನ ಸಂಗ್ರಹಣೆಯೊಂದಿಗೆ ಮೂಲಭೂತ CRUD ಕಾರ್ಯಾಚರಣೆಗಳು

// const ಬಳಕೆದಾರರನ್ನು ರಚಿಸಿ = (ಹೆಸರು: "Ire Aderinokun", ವಯಸ್ಸು: 25 ) sessionStorage.setItem("ಬಳಕೆದಾರ", JSON.stringify(ಬಳಕೆದಾರ)); // ಓದಿ (ಏಕ) console.log(JSON.parse(sessionStorage.getItem("user"))) // ನವೀಕರಿಸಿದ const updatedUser = (ಹೆಸರು: "Ire Aderinokun", ವಯಸ್ಸು: 24 ) sessionStorage.setItem("ಬಳಕೆದಾರ", JSON.stringify(updatedUser)); // sessionStorage.removeItem ("ಬಳಕೆದಾರ") ಅಳಿಸಿ;

ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಅನುಕೂಲಗಳು, ಅನಾನುಕೂಲಗಳು ಮತ್ತು ಬೆಂಬಲವು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಂತೆಯೇ ಇರುತ್ತದೆ.

IndexedDB

IndexedDB ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಪ್ರಬುದ್ಧ ಪರಿಹಾರವಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಗಮನಾರ್ಹ ಪ್ರಮಾಣದ ರಚನಾತ್ಮಕ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಕಡಿಮೆ-ಮಟ್ಟದ API ಆಗಿದೆ. ಅದರ ಮಧ್ಯಭಾಗದಲ್ಲಿ, ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಧಾರಿತ ಆಬ್ಜೆಕ್ಟ್-ಓರಿಯೆಂಟೆಡ್ ಡೇಟಾಬೇಸ್ ಆಗಿದ್ದು ಅದು ಕೀಲಿಯಿಂದ ಸೂಚಿಸಲಾದ ಡೇಟಾವನ್ನು ಸುಲಭವಾಗಿ ಸಂಗ್ರಹಿಸಲು ಮತ್ತು ಹಿಂಪಡೆಯಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

WebSQL

WebSQL ಎಂಬುದು SQLite ನಂತೆಯೇ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರಿಲೇಶನಲ್ ಡೇಟಾಬೇಸ್ API ಆಗಿದೆ. 2010 ರ ಹೊತ್ತಿಗೆ, W3C ವರ್ಕಿಂಗ್ ಗ್ರೂಪ್ ಈ ವಿವರಣೆಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿದೆ ಮತ್ತು ಈ API ಇನ್ನು ಮುಂದೆ HTML ವಿವರಣೆಯ ಭಾಗವಾಗಿರುವುದಿಲ್ಲ ಮತ್ತು ಅದನ್ನು ಬಳಸಬಾರದು.

ಮಾಡಬೇಕಾದ ಪಟ್ಟಿ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಲಿಯುವಾಗ ನೀವು ಮಾಡುವ ಮೊದಲ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿದೆ, ಆದರೆ ಈ ಎಲ್ಲಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸಮಸ್ಯೆಯೆಂದರೆ ನೀವು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿದಾಗ, ಆ ಎಲ್ಲಾ ಪಟ್ಟಿಗಳು ಕಣ್ಮರೆಯಾಗುತ್ತವೆ.
ಸರಳ ಪರಿಹಾರವಿದೆ - ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯನ್ನು ಬಳಸುವುದು. ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯ ಪ್ರಯೋಜನವೆಂದರೆ ನೀವು ಬಳಕೆದಾರರ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಬಿಟ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು ಮತ್ತು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿದಾಗ, ಎಲ್ಲಾ ಕಾರ್ಯ ಪಟ್ಟಿಗಳು ಇನ್ನೂ ಇರುತ್ತವೆ.

ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಎಂದರೇನು?

ಸ್ಥಳೀಯ ಡೇಟಾ ಸಂಗ್ರಹಣೆಯು ಶೇಖರಣಾ ನೆಟ್‌ವರ್ಕ್‌ನ ಭಾಗವಾಗಿದೆ, ಇದು ಸ್ವತಃ HTML5 ವಿವರಣೆಯ ಭಾಗವಾಗಿದೆ. ವಿವರಣೆಯಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ಎರಡು ಆಯ್ಕೆಗಳಿವೆ:

• ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ: ಮುಕ್ತಾಯ ದಿನಾಂಕವಿಲ್ಲದೆ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ, ಮತ್ತು ಇದು ನಾವು ಬಳಸುವ ಆಯ್ಕೆಯಾಗಿದೆ ಏಕೆಂದರೆ ನಮ್ಮ ಪಟ್ಟಿಗಳು ಸಾಧ್ಯವಾದಷ್ಟು ಕಾಲ ಪುಟದಲ್ಲಿ ಉಳಿಯಲು ನಾವು ಬಯಸುತ್ತೇವೆ.
• ಸೆಷನ್ ಸಂಗ್ರಹಣೆ: ಒಂದು ಸೆಷನ್‌ಗಾಗಿ ಮಾತ್ರ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಬಳಕೆದಾರರು ಟ್ಯಾಬ್ ಅನ್ನು ಮುಚ್ಚಿದರೆ ಮತ್ತು ಅದನ್ನು ಮತ್ತೆ ತೆರೆದರೆ, ಅವರ ಎಲ್ಲಾ ಡೇಟಾ ಕಳೆದುಹೋಗುತ್ತದೆ.

ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಎಲ್ಲಾ ವೆಬ್ ಸಂಗ್ರಹಣೆಯು ಸ್ಥಳೀಯವಾಗಿ ಹೆಸರಿನೊಂದಿಗೆ ಕೀ/ಮೌಲ್ಯ ಜೋಡಿಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ ಮತ್ತು ಕುಕೀಗಳಂತಲ್ಲದೆ, ನೀವು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಅನ್ನು ಮುಚ್ಚಿದರೂ ಅಥವಾ ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಅನ್ನು ಆಫ್ ಮಾಡಿದರೂ ಸಹ ಈ ಡೇಟಾವನ್ನು ಉಳಿಸಲಾಗುತ್ತದೆ.

ನಾವು ಮಾಡಬೇಕಾದ ಪಟ್ಟಿಯ ಬಗ್ಗೆ ಯೋಚಿಸಿದರೆ, ನಿಮಗೆ ಈ ಕೆಳಗಿನವುಗಳು ಬೇಕಾಗುತ್ತವೆ:

• ನಮ್ಮ ಪಟ್ಟಿಯನ್ನು ನೀವು ಪೋಸ್ಟ್ ಮಾಡಬಹುದಾದ ಪ್ರವೇಶ ಪ್ರದೇಶ
• ಪಟ್ಟಿಯನ್ನು ಸೇರಿಸಲು ಬಟನ್ ನಮೂದಿಸಿ
• ಸಂಪೂರ್ಣ ಡೈರಿಯನ್ನು ತೆರವುಗೊಳಿಸಲು ಬಟನ್
• ನಮ್ಮ ಪಟ್ಟಿಯನ್ನು ಅಂಶಗಳ ಪಟ್ಟಿಗೆ ಇರಿಸಲಾಗಿರುವ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿ ಕಂಟೇನರ್
• ಮತ್ತು ಅಂತಿಮವಾಗಿ, ನೀವು ಖಾಲಿ ಕಾರ್ಯವನ್ನು ನಮೂದಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಅಧಿಸೂಚನೆಯನ್ನು ತೋರಿಸಲು ನಮಗೆ ಕಂಟೇನರ್ DIV ಅಗತ್ಯವಿದೆ.

ಆದ್ದರಿಂದ ನಮ್ಮ HTML ಈ ರೀತಿ ಇರಬೇಕು: