يتمثل محتوى هذا الدرس في تقديم تخزين الويب ، والذي يستخدمه لتخزين بيانات أزواج القيمة الرئيسية في المتصفح. يشبه وظيفيًا ملفات تعريف الارتباط السابقة ، لكنها أفضل ويمكن أن تكون البيانات المخزنة أكبر. هناك نوعان من تخزين الويب: التخزين المحلي وتخزين الجلسة ، والتي تستخدم نفس آلية التنفيذ ، باستثناء أن دورة الرؤية والحياة مختلفة.
1. استخدم التخزين المحلينستخدم كائن LocalStorage للوصول إلى التخزين المحلي ، الذي يعيد كائن التخزين ، والذي يتم استخدامه لتخزين بيانات أزواج القيمة الرئيسية. لديها الخصائص والأساليب التالية:
Clear (): بوضوح تخزين بيانات زوج المفاتيح ؛
GetItem (<key>): احصل على قيمة من خلال المفتاح ؛
المفتاح (<nester>): احصل على قيمة المفتاح من خلال الفهرس ؛
الطول: إرجاع عدد أزواج القيمة الرئيسية ؛
removeItem (<key>): قم بإزالة البيانات المحددة من خلال المفتاح ؛
SetItem (<key> ، <value>): إضافة زوج قيمة مفتاح. عندما يكون هناك زوج من القيمة الرئيسية للمفتاح المحدد ، يتم تنفيذ عملية التحديث ؛
[<key>]: استخدم المفتاح للحصول على القيمة المحددة من خلال Array Corpcript.
يتيح لنا كائن التخزين تخزين بيانات الزوج ذات القيمة الرئيسية في شكل سلاسل. المفتاح فريد من نوعه ، مما يعني أنه عندما نستخدم طريقة SetItem لإضافة أزواج قيمة المفاتيح ، إذا كانت القيمة الرئيسية موجودة بالفعل ، فسيتم تنفيذ عملية التحديث. دعونا نلقي نظرة على المثال التالي:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
body> *{float: left ؛}
الجدول {حدود الحدود: الانهيار ؛ الهامش اليساري: 50px ؛}
th ، td {padding: 4px ؛}
th {text-align: right ؛}
الإدخال {الحدود: أسود صلب رفيع ؛ الحشو: 2px ؛}
Label {min-width: 50px ؛ display: inline block ؛ text-align: right ؛}
#countmsg ، #buttons {margin-left: 50px ؛ margin-top: 5px ؛ margin-bottom: 5px ؛}
</style>
</head>
<body>
<viv>
<viv>
<sable> المفتاح: </label> <input id = "key" placeholder = "enter key"/> </viv>
<viv>
<sable> القيمة: </label> <input id = "value" placeholder = "enter value"/> </viv>
<div id = "buttons">
<button id = "add"> إضافة </button>
<button id = "clear"> مسح </button>
</div>
<p id = "countmsg"> هناك <span id = "count"> </span> عناصر </p>
</div>
<جدول المعرف = "البيانات">
<tr>
<th> عدد العناصر: </th>
<td id = "count">-</td>
</r>
</table>
<script>
DisplayData () ؛
أزرار var = document.getElementsByTagName ('button') ؛
لـ (var i = 0 ؛ i <buttons.length ؛ i ++) {
الأزرار [i] .onclick = handbouttonpress ؛
}
وظيفة handlebuttonpress (e) {
التبديل (e.target.id) {
حالة "إضافة":
var key = document.getElementById ('Key'). value ؛
var value = document.getElementById ('value'). value ؛
localstorage.setitem (المفتاح ، القيمة) ؛
استراحة؛
حالة "واضحة":
localstorage.clear () ؛
استراحة؛
}
DisplayData () ؛
}
وظيفة DisplayData () {
var tablelement = document.getElementById ('data') ؛
tablelement.innerhtml = '' ؛
var itemCount = localStorage.Length ؛
document.getElementById ('count'). innerhtml = itemCount ؛
لـ (var i = 0 ؛ i <itemCount ؛ i ++) {
var key = localstorage.key (i) ؛
var val = localStorage.getItem (key) ؛
tablelement.innerhtml + = '<tr> <th>' + key + ': </th> <td>' + val + '</td> </tr>' ؛
}
}
</script>
</body>
</html>
دعونا نلقي نظرة على نتائج الجري :لا يمكن للمتصفح حذف البيانات التي أنشأناها من خلال LocalStorage ما لم يحذفها المستخدم.
2. استمع إلى أحداث التخزينالبيانات المخزنة من خلال التخزين المحلي مرئية للوثيقة الأصول الأصول الأصول. على سبيل المثال ، إذا قمت بفتح متصفحين كروم للوصول إلى عنوان عنوان URL نفسه ، فإن التخزين المحلي الذي تم إنشاؤه في أي صفحة مرئية أيضًا للصفحة الأخرى. ومع ذلك ، إذا فتحت عنوان عنوان URL نفسه مع متصفح آخر (مثل Firefox) ، فإن التخزين المحلي غير مرئي لأن لديهم مصادر مختلفة. يتم استخدام حدث التخزين للاستماع إلى التغييرات في محتوى التخزين. دعونا نرى أي خصائص تحتوي على:
المفتاح: إرجاع قيمة المفتاح المتغيرة ؛
Oldvalue: إرجاع القيمة قبل تغيير القيمة الرئيسية ؛
NewValue: إرجاع قيمة القيمة الجديدة التي تغيرت قيمتها الرئيسية ؛
عنوان URL: عنوان عنوان URL الذي تغير ؛
Storagearea: إرجاع كائن التخزين المتغير (التخزين المحلي أو تخزين الجلسة).
دعونا نلقي نظرة على مثال أدناه:
<! doctype html>
<html>
<head>
<title> التخزين </title>
<style>
الجدول {الحدود: الانهيار ؛}
th ، td {padding: 4px ؛}
</style>
</head>
<body>
<جدول المعرف = "البيانات">
<tr>
<h> المفتاح </th>
<th> oldvalue </th>
<h> newValue </h>
<th> url </th>
<h> Storagearea </h>
</r>
</table>
<script>
var tablelement = document.getElementById ('data') ؛
window.onstorage = function (e) {
var row = '<tr>' ؛
Row + = '<td>' + e.key + '</td>' ؛
Row + = '<td>' + e.olevalue + '</td>' ؛
Row + = '<td>' + e.newvalue + '</td>' ؛
Row + = '<td>' + e.url + '</td>' ؛
Row + = '<td>' + (
tablelement.innerhtml += row ؛
}
</script>
</body>
</html>
في المثال 1 ، نضيف وحذف وتعديل بيانات التخزين ، وسيتم عرضها على صفحة المثال 2. مثال 2 يعمل بشكل طبيعي في متصفح Chrome ، لا يستجيب Firefox ، ولا تختبر المتصفحات الأخرى ذلك.
نتائج التشغيل :3. استخدم تخزين الجلسة
تخزين الجلسة هو نفسه التخزين المحلي قيد الاستخدام ، باستثناء أن إمكانية الوصول إليها تقتصر على الصفحة الحالية ، وسوف تختفي بعد إغلاق الصفحة. نصل إليه من خلال SessionStorage.
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
body> *{float: left ؛}
الجدول {حدود الحدود: الانهيار ؛ الهامش اليساري: 50px ؛}
th ، td {padding: 4px ؛}
th {text-align: right ؛}
الإدخال {الحدود: أسود صلب رفيع ؛ الحشو: 2px ؛}
Label {min-width: 50px ؛ display: inline block ؛ text-align: right ؛}
#countmsg ، #buttons {margin-left: 50px ؛ margin-top: 5px ؛ margin-bottom: 5px ؛}
</style>
</head>
<body>
<viv>
<viv>
<sable> المفتاح: </label> <input id = "key" placeholder = "enter key"/> </viv>
<viv>
<sable> القيمة: </label> <input id = "value" placeholder = "enter value"/> </viv>
<div id = "buttons">
<button id = "add"> إضافة </button>
<button id = "clear"> مسح </button>
</div>
<p id = "countmsg"> هناك <span id = "count"> </span> عناصر </p>
</div>
<جدول المعرف = "البيانات">
<tr>
<th> عدد العناصر: </th>
<td id = "count">-</td>
</r>
</table>
<iframe src = "storage.html"> </frame>
<script>
DisplayData () ؛
أزرار var = document.getElementSbyTagName ("زر") ؛
لـ (var i = 0 ؛ i <buttons.length ؛ i ++) {
الأزرار [i] .onclick = handbouttonpress ؛
}
وظيفة handlebuttonpress (e) {
التبديل (e.target.id) {
حالة "إضافة":
var key = document.getElementById ("key"). value ؛
var value = document.getElementById ("value"). value ؛
SessionStorage.setItem (المفتاح ، القيمة) ؛
استراحة؛
حالة "واضحة":
SessionStorage.clear () ؛
استراحة؛
}
DisplayData () ؛
}
وظيفة DisplayData () {
var tablelement = document.getElementById ('data') ؛
tablelement.innerhtml = '' ؛
var itemCount = SessionStorage.length ؛
document.getElementById ('count'). innerhtml = itemCount ؛
لـ (var i = 0 ؛ i <itemCount ؛ i ++) {
var key = sessionStorage.Key (i) ؛
var val = SessionStorage.getItem (key) ؛
tablelement.innerhtml + = "<tr> <th>" + key + ": </th> <td>" + val + "</td> </tr>" ؛
}
}
</script>
</body>
</html>
تأثير الجري :إذا قمت بإجراء أي تغييرات في المثال 3 ، فلن تتغير الصفحة في المثال 2.
تلخيص :يتم استخدام SessionStorage لتخزين البيانات في جلسة محليًا ، والتي لا يمكن الوصول إليها إلا على صفحات في نفس الجلسة وسيتم تدمير البيانات بعد الانتهاء من الجلسة. لذلك ، فإن SessionStorage ليس تخزينًا محليًا مستمرًا ، ولكن فقط تخزين على مستوى الجلسة.
يتم استخدام LocalStorage للتخزين المحلي المستمر ، ولن تنتهي البيانات أبدًا إلا إذا تم حذفها بنشاط.
الفرق بين تخزين الويب وملفات تعريف الارتباط: مفهوم تخزين الويب يشبه ملفات تعريف الارتباط ، والفرق هو أنه مصمم لتخزين سعة أكبر. حجم ملف تعريف الارتباط محدود ، وفي كل مرة تطلب فيها صفحة جديدة ، سيتم إرسال ملف تعريف الارتباط ، الذي يضيع النطاق الترددي بشكل غير مرئي. بالإضافة إلى ذلك ، يجب تحديد ملف تعريف الارتباط ولا يمكن استدعاؤه عبر المجالات. بالإضافة إلى ذلك ، يحتوي تخزين الويب على SetItem و GetItem و RemoveItem و Clear وغيرها من الطرق. على عكس ملفات تعريف الارتباط ، يحتاج المطورون الأماميون إلى تغليف setCookies و GetCookies أنفسهم. أيضًا ، كل مجال (بما في ذلك المجال الفرعي) من تخزين الويب له مساحة تخزين مستقلة ، وكل مساحة تخزين مستقلة تمامًا ، لذلك لن يتسبب في ارتباك البيانات.
لكن ملفات تعريف الارتباط لا غنى عنها أيضًا: تتمثل وظيفة ملفات تعريف الارتباط في التفاعل مع الخادم وتوجد كجزء من مواصفات HTTP ، بينما يتم إنشاء تخزين الويب فقط لتخزين البيانات محليًا.
تنزيل رمز المصدر