מבוא

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

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

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

הבנה של Autofill ו- Auto-Save

(FLT:0)AutofillofLT:1 מתייחס לאוכלוסייה האוטומטית של שדות הטופס עם נתונים מאוחסנים מקומית (למשל, דפדפן autofill, מקומי, קובצי Cookie) או שנלקחו בשרת (למשל, פרטי פרופיל של משתמש) המטרה היא למזער את המאמץ של המשתמש, במיוחד עבור מבקרים חוזרים.

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

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

המונחים: before Implementation

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

אסטרטגיית אחסון נתונים

בחר את מנגנון האחסון הנכון בהתבסס על הרגישות ועל דרישות ההתמדה של הנתונים:

  • (FLT:0)localStorageFLT:1 - מתאים לנתונים שאינם רגישים שיש להמשיך על פני הפעלות הדפדפן.הנתונים שרדו את עמוד המטענים ו-Experreatings. אחסון מקסימלי הוא בדרך כלל 5-10 MB.
  • (ב) ,0sessionStorageFLT:1 - דומה לרישום מקומי, אך הנתונים ברורים כאשר הכרטיסיה או הדפדפן סגורים.
  • (ב) ⁇ :0) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (FLT:0) התעקשות בצד השרת באמצעות AJAXIRLT:1) - עבור נתונים רגישים (פרטים בתשלום, מידע אישי), תמיד לחסוך לנקודת קצה בטוחה ולא אחסון בצד הלקוחות.

הסכמה של משתמשים ושקיפות

משתמשים ב-Inform כאשר הנתונים שלהם מאוחסנים או מלאים בתקנות פרטיות כגון GDPR ו-CCPA דורשים הסכמה מפורשת לאחסון נתונים אישיים. שקול הוספת הודעה קצרה או כדי לצאת מתכונות אוטומטית ואוטומטיות.לעולם אל תאחסן נתונים רגישים כמו מספרי כרטיס אשראי או סיסמאות באחסון לצד הלקוח ללא הצפנה והסכמה של משתמשים.

ביצועים וגיוס משאבים

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

יישום Autofill עם JavaScript

ניתן להפעיל Autofill על עומס דף או כאשר משתמש חוזר טופס מלא בעבר.התבניות הבאות מכסה את התרחישים הנפוצים ביותר.

מקור: Basic Autofill from LocalStorage

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

document.addEventListener('DOMContentLoaded', function() {
 const fields = [
 { id: 'name', key: 'user_name' },
 { id: 'email', key: 'user_email' },
 { id: 'phone', key: 'user_phone' }
 ];

 fields.forEach(function(field) {
 const value = localStorage.getItem(field.key);
 if (value) {
 const input = document.getElementById(field.id);
 if (input) {
 input.value = value;
 }
 }
 });
});

כדי לשמור על הנתונים המאוחסנים הנוכחי, לעדכן את המיטוראז המקומי בכל פעם שהמשתמש משנה שדה:

document.querySelectorAll('.autofill-field').forEach(function(input) {
 input.addEventListener('input', function() {
 const key = 'user_' + this.id;
 localStorage.setItem(key, this.value);
 });
});

Autofill from URL Parameters

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

document.addEventListener('DOMContentLoaded', function() {
 const params = new URLSearchParams(window.location.search);

 if (params.has('name')) {
 document.getElementById('name').value = params.get('name');
 }
 if (params.has('email')) {
 document.getElementById('email').value = params.get('email');
 }
});

תמיד להשריש ולאמת נתונים מפרמטרי כתובת URL כדי למנוע התקפות הזריקה או קלט ממותג.

Autofill from a Server Response

עבור משתמשים אותנטיים, להביא נתונים פרופיל מהגיבוי שלך ולהפיץ את הטופס באופן דינמי.זה נפוץ בזרימת צ'קout, דפי חשבון, ו על גבי קוסמים.

async function loadUserProfile(userId) {
 try {
 const response = await fetch(`/api/users/${userId}/profile`);
 if (!response.ok) throw new Error('Failed to load profile');
 const data = await response.json();

 document.getElementById('name').value = data.name || '';
 document.getElementById('email').value = data.email || '';
 document.getElementById('address').value = data.address || '';
 } catch (error) {
 console.error('Autofill error:', error);
 }
}

document.addEventListener('DOMContentLoaded', function() {
 const userId = window.app.userId; // set by your auth system
 if (userId) {
 loadUserProfile(userId);
 }
});

טכניקות מתקדמות של Autofill

Autofill with Object Storage

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

function saveFormState() {
 const state = {};
 document.querySelectorAll('.autofill-field').forEach(function(input) {
 state[input.name] = input.value;
 });
 localStorage.setItem('formState', JSON.stringify(state));
}

function restoreFormState() {
 const saved = localStorage.getItem('formState');
 if (!saved) return;
 try {
 const state = JSON.parse(saved);
 Object.keys(state).forEach(function(name) {
 const input = document.querySelector(`[name="${name}"]`);
 if (input) {
 input.value = state[name];
 }
 });
 } catch (e) {
 console.warn('Invalid form state data');
 }
}

document.addEventListener('DOMContentLoaded', restoreFormState);

מזג אוויר מבוסס על סוג שדה

סוגים שונים של שדה - טקסט, דואר אלקטרוני, בחר, Checkbox, רדיו - דורש טיפול שונה. שגרת Autofill חזקה חייבת לקחת בחשבון את הריאציות האלה.

function fillField(field, value) {
 if (!field || value == null) return;

 const type = field.type || field.tagName.toLowerCase();

 switch (type) {
 case 'text':
 case 'email':
 case 'tel':
 case 'url':
 case 'number':
 case 'textarea':
 field.value = value;
 break;
 case 'select-one':
 field.value = value;
 break;
 case 'checkbox':
 field.checked = value === true || value === 'true' || value === 'on';
 break;
 case 'radio':
 const radio = document.querySelector(`input[name="${field.name}"][value="${value}"]`);
 if (radio) radio.checked = true;
 break;
 default:
 field.value = value;
 }
}

יצירת פונקציונליות אוטומטית-Save

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

מבוסס על Auto-Save

הגישה הפשוטה ביותר משתמשת (FLT:8) כדי להציל את כל טופס המדינה כל N שניות.זה יעיל עבור צורות ארוכות שבו משתמשים עשויים לעצור בין חלקים.

const AUTO_SAVE_INTERVAL = 30000; // 30 seconds

function autoSave() {
 const formData = {};
 document.querySelectorAll('.auto-save-field').forEach(function(input) {
 if (input.type === 'checkbox') {
 formData[input.name] = input.checked;
 } else if (input.type === 'radio') {
 if (input.checked) {
 formData[input.name] = input.value;
 }
 } else {
 formData[input.name] = input.value;
 }
 });
 localStorage.setItem('autoSaveData', JSON.stringify(formData));
 console.log('Auto-save executed at', new Date().toLocaleTimeString());
}

let autoSaveTimer = setInterval(autoSave, AUTO_SAVE_INTERVAL);

שחזור הנתונים שנשמרו על טעינת העמוד:

document.addEventListener('DOMContentLoaded', function() {
 const saved = localStorage.getItem('autoSaveData');
 if (!saved) return;

 try {
 const data = JSON.parse(saved);
 Object.keys(data).forEach(function(name) {
 const input = document.querySelector(`[name="${name}"]`);
 if (!input) return;

 if (input.type === 'checkbox') {
 input.checked = data[name] === true;
 } else if (input.type === 'radio') {
 const radio = document.querySelector(`input[name="${name}"][value="${data[name]}"]`);
 if (radio) radio.checked = true;
 } else {
 input.value = data[name];
 }
 });
 console.log('Auto-save data restored');
 } catch (e) {
 console.warn('Could not parse auto-save data');
 }
});

רכב אוטומטי-תחזוקה

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

document.querySelectorAll('.auto-save-field').forEach(function(input) {
 input.addEventListener('blur', function() {
 saveField(this.name, this.value);
 });
});

function saveField(name, value) {
 const data = JSON.parse(localStorage.getItem('autoSaveData') || '{}');
 data[name] = value;
 localStorage.setItem('autoSaveData', JSON.stringify(data));
}

לשמור על Page Unload

כדי לתפוס שינויים לא רצויים, לשמור באופן אוטומטי כאשר המשתמש סוגר את הכרטיסיה או לנווט משם.

window.addEventListener('beforeunload', function() {
 const formData = {};
 document.querySelectorAll('.auto-save-field').forEach(function(input) {
 if (input.type === 'checkbox') {
 formData[input.name] = input.checked;
 } else {
 formData[input.name] = input.value;
 }
 });
 localStorage.setItem('autoSaveData', JSON.stringify(formData));
});

הערה: ל-FLT:14 יש כמה מגבלות בדפדפנים מודרניים - אתה לא יכול להראות דיאלוג מותאם אישית, אבל אתה עדיין יכול לבצע כתיבה סינכרונית למקומיים.

Auto-Save עם Debouncing ו- Throttling

חיסכון על כל מפתחי הגולגולת יכול להיות בזבוז. Debouncing מבטיח כי פעולת הצלה מבוצעת רק לאחר שהמשתמש הפסיק להקליד לתקופה מסוימת. Throttling מגביל את תדירות החיסכון לשיעור מקסימלי.

Auto-Save

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

function debounce(func, delay) {
 let timeoutId;
 return function(...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => func.apply(this, args), delay);
 };
}

const saveFormDebounced = debounce(function() {
 const formData = {};
 document.querySelectorAll('.auto-save-field').forEach(function(input) {
 formData[input.name] = input.value;
 });
 localStorage.setItem('autoSaveData', JSON.stringify(formData));
 console.log('Debounced save');
}, 2000); // Wait 2 seconds after the last input

document.querySelectorAll('.auto-save-field').forEach(function(input) {
 input.addEventListener('input', saveFormDebounced);
});

« רכב-השומר

אזהרות על כך שהצלת מתרחשת לרוב בכל מילימטרים, ללא קשר לכמה אירועי קלט יורים.

function throttle(func, limit) {
 let inThrottle = false;
 return function(...args) {
 if (!inThrottle) {
 func.apply(this, args);
 inThrottle = true;
 setTimeout(() => { inThrottle = false; }, limit);
 }
 };
}

const saveFormThrottled = throttle(function() {
 const formData = {};
 document.querySelectorAll('.auto-save-field').forEach(function(input) {
 formData[input.name] = input.value;
 });
 localStorage.setItem('autoSaveData', JSON.stringify(formData));
 console.log('Throttled save');
}, 5000); // Max one save every 5 seconds

document.querySelectorAll('.auto-save-field').forEach(function(input) {
 input.addEventListener('input', saveFormThrottled);
});

בחר ריצוף עבור שדות עתירי טקסט וגזר עבור אינטראקציות מהירות כגון צ'קוקס או שקופיות.

סוגי שדה שונים

מערכת אוטומטית ורכב אוטומטי הנקראת על ייצור חייב להתמודד עם כל בקרת טופס HTML סטנדרטית.

הודעות טקסט וטקסטורות

הם פשוט - לאחסן ולשחזר את הרכוש (FLT:17).

וידאו ורדיו בוטו

עבור צ'קוקס, לאחסן את המדינה כעוזה עבור קבוצות רדיו, לאחסן את ה-FLT:19 של הכפתור שנבחר.

const checkedState = {};
document.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
 checkedState[cb.name] = cb.checked;
});
localStorage.setItem('checkboxState', JSON.stringify(checkedState));

// Restore
const savedCheckboxes = JSON.parse(localStorage.getItem('checkboxState') || '{}');
Object.keys(savedCheckboxes).forEach(function(name) {
 const cb = document.querySelector(`input[name="${name}"]`);
 if (cb) cb.checked = savedCheckboxes[name];
});

אלמנטים נבחרים מאחסנים את האפשרות שנבחרה באמצעות הנכס ®FLT:21 , Multi-select בוחר גם צריך לעקוב אחר ערכים מרובים.

// Single select
document.querySelector('select[name="country"]').value = savedData.country;

// Multi-select
if (Array.isArray(savedData.interests)) {
 const select = document.querySelector('select[name="interests"]');
 Array.from(select.options).forEach(function(opt) {
 opt.selected = savedData.interests.includes(opt.value);
 });
}

תגית: Inputs

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

// Store file name only (value is empty for security)
document.getElementById('resume').addEventListener('change', function() {
 if (this.files.length > 0) {
 localStorage.setItem('resumeFileName', this.files[0].name);
 }
});

// Display stored file name
const fileName = localStorage.getItem('resumeFileName');
if (fileName) {
 document.getElementById('resume-label').textContent = 'Previously selected: ' + fileName;
}

שיקולים ביטחוניים ופרטיות

אחסון נתונים בצד הלקוח הוא נוח אבל מגיע עם סיכונים.עקוב אחר הנחיות אלה כדי להגן על המשתמשים שלך ואת היישום שלך.

לעולם אל תרכוש נתונים רגישים ב- Customer-Side Storage

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

סניטיזציה ואימות לכל

כאשר שחזור נתונים מ- LocalStorage, פרמטרים של כתובת האתר או תשובות השרת, תמיד לאמת את הנתונים לפני הוספתו ל-DOM.זה מונע זריקת XSS אם הנתונים המאוחסנים מכילים HTML זדוני או JavaScript.

function sanitizeValue(value) {
 if (typeof value !== 'string') return value;
 const div = document.createElement('div');
 div.textContent = value;
 return div.textContent;
}

// Use when setting input values from external sources
emailInput.value = sanitizeValue(storedEmail);

Expire מאוחסן בנתונים

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

function saveWithExpiry(key, data, ttlMinutes) {
 const item = {
 value: data,
 expiry: Date.now() + ttlMinutes * 60 * 1000
 };
 localStorage.setItem(key, JSON.stringify(item));
}

function loadWithExpiry(key) {
 const itemStr = localStorage.getItem(key);
 if (!itemStr) return null;
 try {
 const item = JSON.parse(itemStr);
 if (Date.now() > item.expiry) {
 localStorage.removeItem(key);
 return null;
 }
 return item.value;
 } catch {
 return null;
 }
}

// Example: expire form state after 24 hours
saveWithExpiry('formState', formData, 24 * 60);

מידע על טופס

לאחר שצורה הוגשה בהצלחה, להסיר את נתוני ה- Auto-save המאוחסנים כדי למנוע בלבול ושימוש באחסון מיותר.

document.getElementById('myForm').addEventListener('submit', function() {
 localStorage.removeItem('autoSaveData');
 localStorage.removeItem('formState');
 // Remove individual fields as needed
});

בדיקות ווויכוח

תכונות Autofill ו- Auto-save תלויות בתזמון מדויק ויושרה נתונים. ליישם את אסטרטגיות הבדיקות הבאות כדי לתפוס תוקפנות מוקדם.

דפדפנים Developer Tools

השתמש בכרטיסיה היישום ב-Chrome Devtools (או אחסון ב- Firefox) כדי לבדוק את הרשומות המקומיות והמיקום של ההגשה.בדוק כי מפתחות נוצרים, מעודכנים, והוסרים כצפוי.עקוב אחר הקונסולה עבור כל שגיאות הקשורות ל-JSON parsing או אחסון המכסה עלה.

תגית: Edge Cases

בדוק את התרחישים הבאים כדי להבטיח את היישום שלך הוא חזק:

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

מבחן יחידת אחסון לוגיקה

אם אתה מפיץ את לוגיקה אוטומטית למודול נפרד, לכתוב בדיקות יחידות באמצעות מסגרת כמו Jest או Mocha. Mock המקומיStorage כדי לאמת את שמירת ולשחזר התנהגות ללא סביבת דפדפן אמיתית.

// Example test (pseudo-code)
const storageMock = {};
global.localStorage = {
 getItem: (key) => storageMock[key] || null,
 setItem: (key, value) => { storageMock[key] = value; },
 removeItem: (key) => { delete storageMock[key]; }
};

test('saves and restores form state', () => {
 saveFormState({ name: 'Alice', email: '[email protected]' });
 const restored = restoreFormState();
 expect(restored.name).toBe('Alice');
 expect(restored.email).toBe('[email protected]');
});

הטיפים והתרגול הטוב ביותר

  • (FLT:0) השתמש מפתח אחסון יחיד עבור כל צורה של ההרחבה , 1:1 ולא מספר מפתחות בשדה.זה מקטין קל יותר, הופך את הפחתת קל יותר, ומאפשר לך לחסוך ולשחזר באופן אטומי.
  • (ב) [ה] [ה]] לעטוף את ג'ון ו-JSON.strify ב- Try/catchuaFLT: 1 כדי לטפל בנתונים מושחתים או מחוסנים בחסד.
  • (FLT:0)Provide משוב חזותיFLT:1 כאשר מתרחשת אוטומטית-save אינדיקטור "מחוספס" עדין, תזמון, או בדיקת סימון מרגיע את המשתמשים כי התקדמותם מוגנת.
  • (FLT:0) ראו את בחירת המשתמש 1FIRLT) כדי להשבית autofill או אוטומטי-save. להציע לעגמל בצורה או בדף הגדרות המשתמש. השתמש בתכונה (FLT:28 על שדות ספציפיים שאסור להציל (למשל, שדות סיסמה).
  • (FLT:0)Optimize עבור MobileFLT:1hil - לדפדפנים ניידים יש פחות אחסון איטי יותר I / O. Minimize כותב, דחוס נתונים במידת האפשר, ולהימנע מעומסי תשלום גדולים.
  • (FLT:0) מעבר לדפדפנים (FLT:1) - ל- Safari יש את המדיניות המקומית המגבילה ביותר במצב פרטי, וזרק יוצא דופן בכתיבה. פעולות אחסון של Wrap בנסיון/catch כדי להתמודד עם זה בחסד.
  • (ב) ⁇ (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (FLT:0) לשמור על נגישות ב MindFLT:1 - שדות מלאים אוטומטית צריך להיות מזוהה בבירור, ואת הודעות אוטומטית-save יש להודיע לקוראים מסך באמצעות RIT אזורי חיים.
  • (FLT:0) השימוש באחסון של מוניטור (Monitor Storage) 1:1 - ל- LocalStorage יש מכסה (בדרך כלל 5-10 MB) אם הטופס כולל שדות רבים או תמונות (באמצעות בסיס64), ייתכן שתעלה על גבול זה.

מסקנה

יישום יעיל autofill ו- auto-save תכונות עם JavaScript הוא תהליך פשוט הניב שיפורים משמעותיים בחוויית המשתמש ואמינות הנתונים. על ידי מינוף מקומי של התמדה, ריצוף ונפיחות לביצועים, ו-side נפילה לצד השרת עבור נתונים רגישים, אתה יכול לבנות טפסים כי הם נוח ובטוח.

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

(ב) עם דפוסים אלה בערכת הכלים שלך, תוכל להפחית את הנטישה של הטופס, לשפר את שיעורי ההשלמה וליצור חוויה חלקה יותר, סלחנית יותר לכל משתמש.לקראת מידע נוסף, לחקור את תיעוד FLT:0MDN על מסמכים מקומיים (Storage FLT:1) ואת ה-FLT:2sessionStorage APIFLT 3 לאחסון בצד הלקוחות, ולעיין בהנחיות LT5: