تعليق: يقدم هذه المقالة بشكل أساسي أمثلة الاستخدام البسيط لـ LocalStorage ، وقاعدة البيانات المحلية ، و SessionStorage في HTML5 Local Storage. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
تتمثل الميزة الرائعة جدًا في HTML5 في تخزين الويب ، على غرار ملفات تعريف الارتباط السابقة ، ولكن الفرق هو أن تخزين الويب لديه سعة محلية تبلغ 5 ميغابايت للتخزين ، في حين أن ملفات تعريف الارتباط لديها فقط 4K ، وهي ميزة لا يمكن مقارنتها.
يتم تقسيم WebStrange إلى: LocalStorage و SessionStorage وقاعدة البيانات المحلية.
بعد ذلك سأقدمه واحدًا تلو الآخر:
1. محلي
استخدام LocalStorage بسيط نسبيًا ، والطرق هي:
localstorage.setitem (المفتاح ، القيمة) ؛ // حفظ البيانات
LocalStorage.getItem (KEY) ؛ // قراءة البيانات
LocalStorage.RemoveItem (مفتاح) ؛ // حذف البيانات الفردية
localstorage.clear () ؛ // حذف جميع البيانات
المفتاح: localstorage.key (index) ؛ // احصل على قيمة فهرس معين
عرض تجريبي صغير لإظهار الوظيفة:
(وظيفة ($) {
$ (function () {
$ .fn.getformparam = function () {
var serializeObj = {} ؛
var array = this.serializearray () ؛
var str = this.serialize () ؛
$ (Array) .each (function () {
if (serializeObj [this.name]) {
if ($. isarray (serializeObj [this.name])) {
serializeObj [this.name] .push (this.value) ؛
}آخر{
serializeObj [this.name] = [serializeObj [this.name] ، this.value] ؛
}
}آخر{
serializeObj [this.name] = this.value ؛
}
}) ؛
إرجاع SerializeObj ؛
} ؛ </p> <p> var storagefile = json.parse (window.localStorage.getItem ('demo')) ؛
$. EECH (StorageFile ، function (i ، val) {
$ ('#demoform'). find ('[name = "'+i+'"]'). val (val) ؛
}) ؛ </p> <p> $ ('#demoform'). find ('[type = "submit"]'). on ('click' ، function () {
var data = $ ('#demoform'). getFormParam () ؛
window.localStorage.setItem ('Demo' ، Json.Stringify (data)) ؛
العودة كاذبة
}) ؛
}) ؛
}) (jQuery)
رمز HTML:
<! doctype html>
<html lang = "zh">
<head>
<meta charset = "utf-8">
<script src = "jquery-1.10.2.min.js"> </script>
<script src = "demo.js"> </script>
<title> وثيقة </title>
</head>
<body>
<Porm>
<p> <label> <span> name </span> <prope> </billy> </p>
<p> <label> <span> Age </span> <prope> </billy> </p>
<p> <billy> <span> رقم الطالب </span> <pection> </billy> </p>
<p> <label> <span> العنوان </span> <pection> </billy> </p>
<p> <billy> <span> الهوايات </span> <prope> </billy> </p>
<p> <label> <span> Other </span> <textarea cols = "30" rows = "10"> </textarea> </billy> </p>
<p> <input type = "submit" value = "submit"> </p>
</form>
</body>
</html>
وبهذه الطريقة ، يتم تنفيذ العرض التوضيحي البسيط الذي يوضح LocalStorage
2. SessionStorage
إن استخدام SessionStorage هو نفسه استخدام LocalStorage ، ولكن سيتم مسح SessionStorage عندما يغلق المتصفح موقع الويب ، وسيتم حفظ LocalStorage إلى المتصفح ، وسيتم استخدام كلاهما معًا حسب الاقتضاء.
3. قاعدة البيانات المحلية
يجب أن يكون الطلاب المألوفون في تطوير iOS/Android أكثر دراية بقواعد بيانات SQLite
تشغيل قاعدة البيانات في HTML5 بسيطة نسبيًا ، بما في ذلك طريقة Opendatabase وطريقة المعاملة
استخدم كائن DB لتلقي الكائنات التي تم إنشاؤها بواسطة Opendatabase للوصول إلى قاعدة البيانات
var db = opendatabase (databasename ، الإصدار ، الوصف ، الحجم)
في
databasename: اسم قاعدة البيانات
الإصدار: يمكن تجاهل إصدار قاعدة البيانات
الوصف: وصف قاعدة البيانات
الحجم: قاعدة البيانات المخصصة للمساحة
تستخدم طريقة المعاملة وظيفة رد الاتصال كمعلمة لتنفيذ طريقة محددة للوصول إلى قاعدة البيانات في الوظيفة.
db.transaction (وظيفة (تكساس)) {
tx.executesql (sqlquery ، [value1 ، value2 ..] ، datahandler ، errorhandler)
}) ؛
المعلمات الأربعة لطريقة تنفيذ executesql هي:
SQLquery: عبارات SQL التي يجب تنفيذها على وجه التحديد ، إنشاء || حدد || تحديث || حذف ؛
[value1 ، value2 ..]: مجموعة من جميع المعلمات المستخدمة في عبارة SQL. في طريقة تنفيذ executesql ، يتم استبدال المعلمات الواجب استخدامها في عبارة SQL أولاً بـ؟ ، ثم تتكون هذه المعلمات من صفيف بدورها ووضعها في المعلمة الثانية ؛
Datahandler: تنفيذ وظيفة رد الاتصال الناجح ؛
ErrorHandler: فشلت وظيفة رد الاتصال في التنفيذ ؛