כיצד להשתמש ב-localStorage ב-JavaScript

מנגנון localStorage מספק סוג של אובייקט אחסון אינטרנט המאפשר לך לאחסן ולאחזר נתונים בדפדפן. אתה יכול לאחסן ולגשת לנתונים ללא תפוגה; הנתונים יהיו זמינים גם לאחר שמבקר יסגור את האתר שלך.

בדרך כלל תיגש ל-localStorage באמצעות JavaScript. עם כמות קטנה של קוד, אתה יכול לבנות פרויקט לדוגמה, כמו מונה ציונים. זה יראה כיצד תוכל לאחסן ולגשת לנתונים קבועים באמצעות קוד בצד הלקוח בלבד.

מהו localStorage ב-JavaScript?

האובייקט localStorage הוא חלק מממשק ה-API של אחסון האינטרנט שרוב דפדפני האינטרנט תומכים בו. אתה יכול לאחסן נתונים כזוגות מפתח-ערך באמצעות localStorage. המפתחות והערכים הייחודיים צריכים להיות בפורמט UTF-16 DOM String.

אם ברצונך לאחסן אובייקטים או מערכים, תצטרך להמיר אותם למחרוזות באמצעות ה- JSON.stringify() שיטה. אתה יכול לאחסן עד 5MB של נתונים ב-localStorage. כמו כן, כל החלונות עם אותו מקור יכולים לשתף את נתוני האחסון המקומי של האתר הזה.

דפדפן לא ימחק את הנתונים האלה גם כאשר משתמש יסגור אותם. הוא יהיה זמין לאתר שיצר אותו במהלך כל הפעלה עתידית. עם זאת, אל תשתמש ב-localStorage עבור נתונים רגישים מכיוון שסקריפטים אחרים הפועלים באותו דף יכולים לגשת אליו.

localStorage לעומת sessionStorage

ה localStorage ו- sessionStorage אובייקטים הם חלק מ-Web Storage API המאחסן צמדי מפתח-ערך באופן מקומי. כל הדפדפנים המודרניים תומכים בשניהם. עם localStorage, תוקף הנתונים אינו פג גם לאחר שמשתמש סוגר את הדפדפן שלו. זה שונה מ-sessionStorage שמנקה נתונים כאשר הפעלת הדף מסתיימת. הפעלת עמוד מסתיימת כאשר אתה סוגר כרטיסייה או חלון.

הקוד המשמש בפרויקט זה זמין ב-a מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT. אם אתה רוצה להסתכל על גרסה חיה של פרויקט מונה הציונים, אתה יכול לבדוק את השידור החי הַדגָמָה.

כיצד פועל LocalStorage?

אתה יכול לגשת לפונקציונליות localStorage דרך Window.localStorage תכונה. מאפיין זה מספק מספר שיטות כמו setItem(), getItem() ו- removeItem(). אתה יכול להשתמש בהם כדי לאחסן, לקרוא ולמחוק צמדי מפתח/ערך.

כיצד לאחסן נתונים ב-localStorage

אתה יכול לאחסן נתונים ב-localStorage באמצעות setItem() שיטה. שיטה זו מקבלת שני ארגומנטים, המפתח והערך המתאים.

window.localStorage.setItem('פִּיתוֹן', 'גידו ואן רוסום');

כאן, פִּיתוֹן הוא המפתח ו גידו ואן רוסום הוא הערך. אם ברצונך לאחסן מערך או אובייקט, תצטרך להמיר אותו למחרוזת. אתה יכול להמיר מערך או אובייקט למחרוזת באמצעות ה JSON.stringify() שיטה.

חַלוֹן.localStorage.setItem('Python', 'Guido van Rossum');
const תלמיד = {
 שם: "Yuvraj",
 סימנים: 85,
 נושא: "למידת מכונה"
}
const ציונים = [76, 77, 34, 67, 88];
חַלוֹן.localStorage.setItem('result', JSON.stringify (תלמיד));
חַלוֹן.localStorage.setItem('marks', JSON.stringify (ציונים));

כיצד לקרוא נתונים מ-localStorage

אתה יכול לקרוא נתונים מ-localStorage באמצעות ה getItem() שיטה. שיטה זו מקבלת את המפתח כפרמטר ומחזירה את הערך כמחרוזת.

תן נתונים1 = חַלוֹן.localStorage.getItem('Python');
תן נתונים2 = חַלוֹן.localStorage.getItem('result');
לְנַחֵם.log (data1);
לְנַחֵם.log (data2);

זה מייצר את הפלט הבא:

גידו ואן רוסום
{"שֵׁם":"יובראג'","סימנים":85,"נושא":"למידת מכונה"}

אם ברצונך להמיר את התוצאה ממחרוזת לאובייקט, עליך להשתמש ב- JSON.parse() שיטה.

תן נתונים2 = JSON.לְנַתֵחַ(חַלוֹן.localStorage.getItem('result'));
לְנַחֵם.log (data2);

כיצד למחוק פעילויות אחסון מקומיות

אתה יכול למחוק הפעלות LocalStorage באמצעות הסר פריט() שיטה. עליך להעביר את המפתח כפרמטר לשיטה זו כדי למחוק את צמד המפתח-ערך. אם המפתח קיים, השיטה תמחק את צמד המפתח-ערך ואם המפתח אינו קיים, השיטה לא תעשה דבר.

window.localStorage.removeItem('פִּיתוֹן');
window.localStorage.removeItem('C++');

כיצד לנקות את כל הפריטים ב-localStorage

אתה יכול לנקות את כל הפריטים באחסון המקומי באמצעות ברור() שיטה. אתה לא צריך להעביר שום פרמטר לשיטה זו.

חַלוֹן.אחסון מקומי.ברור();

כיצד למצוא את אורך האחסון המקומי

אתה יכול למצוא את אורך localStorage באמצעות ה localStorage.length תכונה.

תן len = localStorage.length;
לְנַחֵם.log (len);

כיצד להשיג את המפתח במיקום נתון

אתה יכול לקבל את המפתח במיקום נתון באמצעות ה מַפְתֵחַ() שיטה. שיטה זו מקבלת את האינדקס כפרמטר.

תן d = localStorage.key(1);
לְנַחֵם.log (d);

שיטת key() משמשת בעיקר ללולאה דרך כל הפריטים ב-localStorage.

כיצד לעבור בלולאה בין כל הפריטים באחסון המקומי

אתה יכול לחזור על כל הפריטים ב-localStorage באמצעות לולאת for.

ל (תן אני = 0; i < localStorage.length; i++){
תן key = localStorage.key (i);
תן value = localStorage.getItem (מפתח);
לְנַחֵם.log (מפתח, ערך);
}

שיטת key() מקבלת את האינדקס כארגומנט ומחזירה את המפתח המתאים. השיטה getItem() מקבלת את המפתח כארגומנט ומחזירה את הערך המתאים. לבסוף, ה console.log() השיטה מדפיסה את צמד המפתח-ערך.

פרויקט JavaScript פשוט המבוסס על localStorage

עם הבנה של השיטות הבסיסיות שלו, אתה יכול להתפתח פרויקט JavaScript פשוט מבוסס על localStorage. בפרויקט זה, תיצור אפליקציית מונה ציונים שתגדיל ותקטין את ספירת הציונים לפי לחיצת כפתור. כמו כן, תטמיע פונקציונליות כדי לנקות את כל הפריטים ב-localStorage.

ליצור index.html ו script.js קובץ בתיקייה חדשה ופתח את הקבצים בעורך הקוד המועדף עליך. השתמש בקוד ה-HTML הבא כדי ליצור ממשק עבור אפליקציית מונה הציונים:

<!DOCTYPE html>
<html>
<גוּף>
<h1>localStorage ב-JavaScript</h1>
<כפתור onclick="הגדלהCounter()" סוג="לַחְצָן">הגדל את הציון</button>
<כפתור onclick="ירידהמונה()" סוג="לַחְצָן">הקטנת ציון</button>
<כפתור onclick="clearCounter()" סוג="לַחְצָן">נקה אחסון מקומי</button>
<ע>ציון:</p>
<p id="ציון"></p>
<ע>הקלק על ה "הגדל את הציון" לחצן כדי להגדיל את ספירת הניקוד</p>
<ע>הקלק על ה "הקטנת ציון" לחצן כדי להקטין את ספירת הניקוד</p>
<ע>הקלק על ה "נקה אחסון מקומי" לחצן כדי לנקות את האחסון המקומי</p>
<ע>
 אתה יכול לסגור את לשונית הדפדפן (או חַלוֹן), ו לְנַסוֹת שוב.
 אתה תראה שהנתונים עדיין נמשכים והואלֹא אבוד גם לאחר הסגירה
 הדפדפן.
</p>
<script src="script.js"></script>
</body>
</html>

דף זה מכיל שלושה כפתורים: הגדל את הציון, הקטנת ציון, ו נקה אחסון מקומי. לחצנים אלה קוראים את הגדלהCounter(), ירידהמונה(), ו clearCounter() פונקציות בהתאמה. השתמש בקוד הבא כדי להוסיף פונקציונליות לאפליקציית מונה הציונים באמצעות JavaScript.

פוּנקצִיָההגדלהמונה() {
var לספור = מספר(חַלוֹן.localStorage.getItem("count"));
 ספירה += 1;
 window.localStorage.setItem("לספור", לספור);
 document.getElementById("ציון").innerHTML = count;
}

ה הגדלהCounter() הפונקציה מאחזרת את הספירה באמצעות שיטת getItem(). הוא ממיר את התוצאה ל- Number, שכן getItem() מחזירה מחרוזת, ומאחסנת אותה במשתנה ה-count.

בפעם הראשונה שאתה לוחץ על הגדל את הציון הלחצן יהיה לפני כל קריאה ל-setItem(). הדפדפן שלך לא ימצא את לספור מפתח ב-localStorage, כך שהוא יחזיר ערך null. מכיוון שהפונקציה Number() מחזירה 0 עבור קלט null, היא אינה זקוקה לטיפול מיוחד במקרה. הקוד יכול להגדיל בבטחה את ערך הספירה לפני אחסונו ועדכון המסמך כדי להציג את הערך החדש.

פוּנקצִיָההפחתהמונה() {
var לספור = מספר(חַלוֹן.localStorage.getItem("count"));
 ספירה -= 1;
 window.localStorage.setItem("לספור", לספור);
 document.getElementById("ציון").innerHTML = count;
}

ה ירידהמונה() הפונקציה מאחזרת ובודקת את הנתונים בדיוק כמו הגדלהCounter() עושה. זה מקטין את לספור משתנה ב-1, שברירת המחדל הוא 0.

פוּנקצִיָהclearCounter() {
חַלוֹן.אחסון מקומי.ברור();
 document.getElementById("ציון").innerHTML = "";
}

אחרון, ה clearCounter() הפונקציה מוחקת את כל הנתונים מ-localStorage באמצעות ה- ברור() שיטה.

עשה יותר עם localStorage

לאובייקט localStorage יש מספר שיטות כולל setItem(), getItem(), removeItem() ו- clear(). בעוד ש-localStorage קל לשימוש, לא בטוח לאחסן מידע רגיש. אבל זו בחירה טובה לפתח פרויקטים שאינם דורשים אחסון רב ואינם כוללים מידע רגיש.

רוצה לבנות עוד פרויקט JavaScript מבוסס LocalStorage? הנה אפליקציית רשימת מטלות בסיסית שתוכל לפתח באמצעות HTML, CSS ו-JavaScript.