تخزين الويب هو وظيفة مهمة للغاية تم تقديمها بواسطة HTML5. يمكنه تخزين البيانات محليًا على جانب العميل. يشبه ملفات تعريف الارتباط HTML4 ، ولكن يمكنها تنفيذ وظائف أقوى بكثير من ملفات تعريف الارتباط. يقتصر حجم ملف تعريف الارتباط على 4 كيلو بايت. يوصي مسؤول تخزين الويب 5 ميجابايت لكل موقع.
ينقسم تخزين الويب إلى نوعين :SessionStorage
LocalStorage
يمكن رؤيته بوضوح من المعنى الحرفي بأن SessionStorage يحفظ البيانات في الجلسة ، ويتم إغلاق المتصفح ؛ يحتفظ LocalStorage بالبيانات محليًا على العميل ؛
سواء كانت SessionStorage أو LocalStorage ، فإن واجهات برمجة التطبيقات التي يمكن استخدامها هي نفسها. تلك الشائعة الاستخدام هي كما يلي (مع أخذ LocalStorage كمثال):
حفظ البيانات: localstorage.setitem (المفتاح ، القيمة) ؛
قراءة البيانات: LocalStorage.getItem (KEY) ؛
حذف البيانات الفردية: LocalStorage.RemoveItem (مفتاح) ؛
حذف جميع البيانات: localstorage.clear () ؛
احصل على مفتاح فهرس معين: localstorage.key (index) ؛
كما ذكر أعلاه ، يجب أن يكون كل من المفتاح والقيمة سلاسل. بمعنى آخر ، لا يمكن لـ Web Storage API التلاعب بالسلاسل إلا.
بعد ذلك ، نقوم بتطوير تطبيق دفتر عناوين بسيط من خلال تخزين الويب لإظهار كيفية استخدام واجهات برمجة التطبيقات ذات الصلة ؛ نريد تنفيذ الوظائف التالية:
أدخل شخص الاتصال. يحتوي شخص الاتصال على حقلان: الاسم ورقم الهاتف المحمول ، ويستخدم رقم الهاتف المحمول كمفتاح لتخزينه في LocalStorage ؛
ابحث عن المالك وفقًا لرقم الهاتف المحمول ؛
قائمة جميع معلومات الاتصال المحفوظة حاليًا ؛
أولاً ، قم بإعداد صفحة HTML بسيطة ، على النحو التالي :<! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<title> HTML5 محلي التخزين تخزين ويب المقالة </title>
</head>
<body>
<div style = "الحدود: 2px متقطعة #CCC ؛ العرض: 320px ؛ محاذاة النص: المركز ؛">
<label for = "user_name"> الاسم: </label>
<type type = "text" id = "user_name" name = "user_name"/>
<br/>
<label for = "mobilephone"> الهاتف المحمول: </label>
<type type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<type type = "button" onClick = "Save ()" value = "add record"/>
<hr/>
<label for = "search_phone"> أدخل رقم الهاتف المحمول: </label>
<type type = "text" id = "search_phone" name = "search_phone"/>
<type type = "button" onClick = "find ()" value = "Find the Owner"/>
<p id = "find_result"> <br/> </p>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
يتم عرض الواجهة على النحو التالي :لحفظ جهات الاتصال ، تحتاج فقط إلى تنفيذ طريقة JS التالية:
// حفظ البيانات
وظيفة حفظ () {
var mobilephone = document.getElementById ("mobilephone"). القيمة ؛
var user_name = document.getElementById ("user_name"). value ؛
localstorage.setItem (mobilephone ، user_name) ؛
}
لتنفيذ مالك البحث ، يتم تنفيذ طريقة JS التالية :// البحث عن البيانات
وظيفة البحث () {
var search_phone = document.getElementById ("search_phone"). value ؛
var name = localStorage.getItem (search_phone) ؛
var find_result = document.getElementById ("find_result") ؛
صاحب Find_result.innerhtml = search_phone + "هو:" + name ؛
}
لعرض جميع معلومات الاتصال المحفوظة ، تحتاج إلى استخدام طريقة localstorage.key (الفهرس) ، على النحو التالي:
// استخراج جميع الكائنات المخزنة في LocalStorage وعرضها على الواجهة
وظيفة loadall () {
var list = document.getElementById ("list") ؛
if (localstorage.length> 0) {
var result = "<table border = '1'>" ؛
النتيجة += "<tr> <td> name </td> <td> رقم الهاتف المحمول </td> </tr>" ؛
لـ (var i = 0 ؛ i <localstorage.length ؛ i ++) {
var mobilephone = localstorage.key (i) ؛
var name = localStorage.getItem (mobilephone) ؛
النتيجة+= "<tr> <td>"+name+"</td> <td>"+mobilephone+"</td> </tr>" ؛
}
النتيجة += "</table>" ؛
list.innerhtml = النتيجة ؛
}آخر{
list.innerhtml = "البيانات فارغة حاليًا ، وعجلت وتبدأ في إضافة جهات الاتصال" ؛
}
}
الآثار هي كما يلي:
سؤال: كما ذكر أعلاه ، لا يوجد سوى حقلان ، اسم ورقم الهاتف المحمول. إذا كنت ترغب في إيداع معلومات الاتصال الأكثر ثراءً ، مثل اسم الشركة ، وعنوان المنزل ، وما إلى ذلك ، كيفية تحقيق ذلك؟ أليس تخزين الويب قادرًا فقط على معالجة السلاسل؟ في هذا الوقت ، يمكنك استخدام طريقة stringify () لـ JSON لتحويل الكائنات المعقدة إلى سلاسل وتخزينها في تخزين الويب ؛ عند القراءة من تخزين الويب ، يمكنك تحويلها إلى كائنات JSON من خلال طريقة JSON'S PARSE () ؛
يضيف العرض التوضيحي الموجز التالي سمات الشركة إلى حفظ رمز JS :// حفظ البيانات
وظيفة حفظ () {
var contact = كائن جديد ؛
contact.user_name = document.getElementById ("user_name"). value ؛
contact.mobilephone = document.getElementById ("mobilephone"). القيمة ؛
contact.company = document.getElementById ("الشركة"). القيمة ؛
var str = json.stringify (contact) ؛
localstorage.setitem (contact.mobilephone ، str) ؛
loadall () ؛
}
// استخراج جميع الكائنات المخزنة في LocalStorage وعرضها على الواجهة
وظيفة loadall () {
var list = document.getElementById ("list") ؛
if (localstorage.length> 0) {
var result = "<table border = '1'>" ؛
النتيجة += "<tr> <td> name </td> <td> mobile </td> <td> الشركة </td> </tr>" ؛
لـ (var i = 0 ؛ i <localstorage.length ؛ i ++) {
var mobilephone = localstorage.key (i) ؛
var str = localstorage.getItem (mobilephone) ؛
var contact = json.parse (str) ؛
النتيجة+= "<tr> <td>"+contact.user_name+"</td> <td>"+contact.mobilephone+"</td> <td>"+contact.company+"</td> </tr>" ؛
}
النتيجة += "</table>" ؛
list.innerhtml = النتيجة ؛
}آخر{
list.innerhtml = "البيانات فارغة حاليًا ، وعجلت وتبدأ في إضافة جهات الاتصال" ؛
}
}
الآثار هي كما يلي: