שלום אורח התחבר

טיפ JavaScript: שמירת מידע לקבצים וטעינה חזרה

נושאים:יומי

יישומי Front End מאפשרים למשתמשים להכניס מידע. הרבה פעמים אנחנו שומרים את המידע בשרת אבל לפעמים אין לנו שרת או שהמידע לא מתאים לשמירה בבסיס הנתונים ואז היינו רוצים לתת את המידע למשתמש בתור קובץ. בדוגמה זו אראה איך לממש טופס עם שני כפתורים - כפתור אחד "מוריד" את המידע שבטופס לקובץ JSON על מחשב המשתמש וכפתור שני "מעלה" קובץ JSON מהמחשב כדי למלא ממנו את הטופס.

1קוד ה HTML

קוד ה HTML של הדוגמה כולל טופס עם 3 שדות. לכל שדה מוגדר name שיהיה המפתח ב JSON, והערך יהיה הערך שהמשתמש הכניס לשדה. זה הקוד:

<div>
  <button id="exportButton">Export to JSON</button>
  <button id="importButton">Import From JSON</button>
</div>
<hr />
<form>  
  <div>
  <label>Name: </label>
  <input type="text" name="name" />
  </div>

  <div>
    <label>Phone Number: </label>
    <input type="tel" name="tel" />
  </div>
  <div>
    <label>Email:</label>
    <input type="email" name="email" />
  </div>
</form>

2שמירת המידע לקובץ

בשביל לקחת את תוכן השדות לקובץ אצלי על המחשב אני צריך שני דברים: קודם כל אני צריך להעביר את כל המידע מהטופס לאוביקט JSON, ואחר כך צריך "להוריד" את אוביקט ה JSON בתור קובץ.

בשביל החלק הראשון קל להשתמש ב FormData:

const form = document.querySelector('form');
const fd = new FormData(form);
const data = JSON.stringify(Object.fromEntries(fd));

אחרי זה אני יוצר אלמנט "קישור" שיוריד את הקובץ, לוחץ עליו ומוחק אותו מהמסך:

const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(data);
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href",     dataStr);
downloadAnchorNode.setAttribute("download", "form.json");
  document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();

קוד הפונקציה המלא הוא לכן:

function download() {
  const form = document.querySelector('form');
  const fd = new FormData(form);
  const data = JSON.stringify(Object.fromEntries(fd));

  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(data);
  const downloadAnchorNode = document.createElement('a');
  downloadAnchorNode.setAttribute("href",     dataStr);
  downloadAnchorNode.setAttribute("download", "form.json");
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
  downloadAnchorNode.remove();  
}

3העלאת הקובץ ועדכון הטופס

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

סך הכל הפונקציה היא:

function upload() {
  const form = document.querySelector('form');
  const input = document.createElement('input');
  input.type = 'file';

  input.onchange = e => { 
    const file = e.target.files[0]; 

    const reader = new FileReader();
    reader.readAsText(file,'UTF-8');

    reader.onload = readerEvent => {
      const content = JSON.parse(readerEvent.target.result); // this is the content!
      console.log(typeof content);
      for (const key of Object.keys(content)) {
        console.log(key);
        form.querySelector(`input[name="${key}"]`).value = content[key];
      }
    }
  }

  input.click();
}

בקישור הבא תוכלו למצוא את כל הקוד בקודפן עובד: https://codepen.io/ynonp/pen/XWZbpoK

או אם אתם קוראים את זה מהדפדפן אז הנה הוא בהטמעה:

מעדיפים לקרוא מהטלגרם? בקרו אותנו ב:@tocodeil

או הזינו את כתובת המייל וקבלו את הפוסט היומי בכל בוקר אליכם לתיבה:


נהניתם מהפוסט? מוזמנים לשתף ולהגיב