دليل أساسي لـ HTML5

API لـ HTML5

وسائط HTML5

توجيهات HTML5

قاعدة البيانات المحلية في HTML5 عناصر الاصطلاحية في HTML5

تخزين العملاء في HTML5

تخزين المستخدم العميل لـ HTML5، طريقة تخزين محلية أفضل من الكوكي. يمكن استخدام HTML5 لتخزين بيانات تصفح المستخدم المحلية.

ما هو تخزين المستخدم العميل لـ HTML5?

يمكن استخدام HTML5 لتخزين بيانات تصفح المستخدم المحلية.

في السابق، كان يتم استخدامه لتحديد البيانات المحلية هو الكوكي. ولكن تخزين الويب يتطلب أمانًا وسرعة أكبر. هذه البيانات لن يتم تخزينها على الخادم، ولكن سيتم استخدامها فقط لطلب بيانات الموقع. يمكن أيضًا تخزين كميات كبيرة من البيانات دون تأثير على أداء الموقع.

البيانات موجودة تحت شكل مفردات/قيم، ويتم إعطاء إذن الوصول إلى بيانات الويب فقط للصفحة التي توجد فيها.

دعم المتصفح

يدعم متصفح إنترنت إكسبلورر 8+، فايرفوكس، أوبرا، كروم، وسافاري تخزين الويب.

التحذير: متصفح إنترنت إكسبلورر 7 وأحدث إصداراته لا يدعمون تخزين الويب.

localStorage و sessionStorage　

الشركات المستودعات للبيانات على الكمبيوتر العميل تتكون من:

localStorage - يستخدم لحفظ بيانات الموقع الكامل لفترة طويلة، وبيانات الحفظ ليس لديها وقت انتهاء صلاحية، حتى يتم إزالتها يدويًا.
sessionStorage - تستخدم لحفظ البيانات المؤقتة للنافذة (أو الوسيلة) نفسها، ويتم حذف هذه البيانات بعد إغلاق النافذة أو الوسيلة.

قبل استخدام إدارة الذاكرة الالكترونية web، يجب التحقق من دعم المتصفح لـ localStorage وsessionStorage:

مثال

if (typeof(Storage)!=="undefined")
{
　　　　// نعم! يدعم localStorage و sessionStorage.
　　　　// بعض الكود.....
} else {
　　　　// عذراً! غير مدعوم إدارة الذاكرة الالكترونية web.
}

object localStorage

لا يوجد حد زمني لبيانات object localStorage. يمكن الوصول إلى البيانات في اليوم التالي أو الأسبوع التالي أو بعد عام، وما إلى ذلك.

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليم الأساسيات (oldtoolbag.com)</title>　
</head>
<body>
<div id="result"></div>
<script>
if (typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "موقع تعليمي أساسي";
　　document.getElementById("result").innerHTML = "اسم الموقع: " + localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="آسف، متصفحك لا يدعم التخزين عبر الويب.";
}
</script>
</body>
</html>

اختبار النظر في ‹/›

تفسير الأمثلة:

إنشاء زوج مفتاح/قيمة باستخدام key="sitename" وvalue="موقع تعليمي أساسي" لـ localStorage.
البحث عن القيمة المرتبطة بكلمة "sitename" ثم إدراج البيانات في العنصر الذي يحتوي على id="result".

يمكن كتابة الأمثلة السابقة كما يلي:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليم الأساسيات (oldtoolbag.com)</title>　
</head>
<body>
<script>
// التخزين
localStorage.sitename = "موقع تعليمي أساسي";
// البحث
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>

اختبار النظر في ‹/›

إزالة "sitename" من localStorage:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليم الأساسيات (oldtoolbag.com)</title>　
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>

اختبار النظر في ‹/›

سواء كان localStorage أم sessionStorage، جميع واجهات البرمجة المتاحة متشابهة، والأكثر شيوعًا هي كما يلي (مثالًا على localStorage):

حفظ البيانات: localStorage.setItem(key, value);
قراءة البيانات: localStorage.getItem(key);
حذف بيانات واحدة: localStorage.removeItem(key);
حذف جميع البيانات: localStorage.clear();
الحصول على مفتاح الفهرس: localStorage.key(index);

ملاحظة: يتم تخزين الأزواج المفتاح/القيمة عادةً كنص، يمكنك تحويل هذا النمط حسب الحاجة.

يظهر المثال التالي عدد مرات الضغط على الزر من قبل المستخدم.

تحويل القيم النصية في الكود إلى نوع الرقم:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>موقع تعليم الأساسيات (oldtoolbag.com)</title>　　　　　
<script>
function clickCounter()
{
　　　　if (typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if (localStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="لقد ضغطت على الزر " + localStorage.clickcount + " مرة";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="آسف، متصفحك لا يدعم التخزين عبر الويب.";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">ضغطي هنا!</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>إذا قمت بإغلاق علامة التبويب (أو النافذة)، وإعادة فتح هذه الصفحة، سيستمر العداسية في العد (بدلاً من إعادة الإعدادات).</p>
</body>
</html>

اختبار النظر في ‹/›

مكتبة sessionStorage

يستخدم مكتبة sessionStorage لتخزين البيانات لفترة الجلسة. يتم حذف البيانات عند إغلاق نافذة المتصفح.

كيفية إنشاء ووصول إلى sessionStorage:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>موقع تعليم الأساسيات (oldtoolbag.com)</title>　
<script>
function clickCounter()
{
　　　　if (typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if (sessionStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="في هذه الجلسة قمت بالضغط على الزر " + sessionStorage.clickcount + " مرة";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="آسف، متصفحك لا يدعم التخزين عبر الويب";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">ضغطي هنا!</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>

اختبار النظر في ‹/›

Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

可以输入网站名，网址，以网站名作为key存入localStorage；
根据网站名，查找网址；
列出当前已保存的所有网站；

以下代码用于保存于查找数据：

طرق save() و find()

مثال

// حفظ البيانات　　
function save(){}　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, ";");
　　　　alert("添加成功");
}
// 查找数据　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var sitename = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");　　
　　　　find_result.innerHTML = search_site + ";的网址是：" + sitename;　　
}

完整示例演示如下：

مثال

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>مقالة Web Storage المحلية في HTML5</title>　　
</head>　　
<body>　　
　　　　<div style="border: 2px dashed #ccc;width:320px;text-align:center;">　　　　　
　　　　　　　　<label for="sitename">网站名(key)：</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<label for="siteurl">网　址(value)：</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<input type="button" onclick="save()" value="إضافة سجل جديد"/>　　
　　　　　　　　<hr/>　　
　　　　　　　　<label for="search_phone">输入网站名：</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>　　
　　　　　　　　<input type="button" onclick="find()" value="البحث عن الموقع"/>　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　// 载入所有存储在localStorage的数据
　　　　loadAll();　　　　　
　　　　　　　　
　　　　// حفظ البيانات　　
　　　　function save(){}　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, ";");
　　　　　　　　alert("添加成功");
　　　　}
　　　　// 查找数据　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var siteurl = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");　　
　　　　　　　　find_result.innerHTML = search_site + ";的网址是：" + siteurl;　　
　　　　}
　　　　// 将所有存储在 localStorage 中的对象提取出来，并展现到界面上
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result += ";<tr><td>key</td><td>value</td></tr>";　　
　　　　　　　　　　　　for(var i=0; i<localStorage.length; i++){　　
　　　　　　　　　　　　　　　　var sitename = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var siteurl = localStorage.getItem(sitename);　　
　　　　　　　　　　　　　　　　result += ";<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result += "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = ";数据为空……";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>

اختبار النظر في ‹/›

شاشة للنتائج المطبقة:

هذا المثال يوضح فقط كيفية استخدام localStorage للتحفظ والبحث، في أغلب الأحيان ستكون البيانات التي نحفظها أكثر تعقيدًا.

ثم سنستخدم JSON.stringify لتحفظ بيانات العنصر، يمكن لـ JSON.stringify تحويل العنصر إلى نص.

مثال

var site = new Object;
...
var str = JSON.stringify(site); // 将对象转换为字符串

بعد ذلك سنستخدم JSON.parse لنقل النص إلى عنصر JSON:

مثال

var site = JSON.parse(str);

كود التحقق JavaScript:

طرق save() و find()

مثال

// حفظ البيانات　　
function save(){}　　
　　　　var site = new Object;
　　　　site.keyname = document.getElementById("keyname").value;
　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　var str = JSON.stringify(site); // 将对象转换为字符串
　　　　localStorage.setItem(site.keyname,str);　　
　　　　alert("保存成功");
}　　
// 查找数据　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var str = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");
　　　　var site = JSON.parse(str);　　
　　　　find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;　　
}

مثال كامل يلي:

مثال

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>مقالة Web Storage المحلية في HTML5</title>　　
</head>　　
<body>　　
　　　　<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
　　　　　　　　<label for="keyname">الاسم البديل (المفتاح):</label>　　
　　　　　　　　<input type="text" id="keyname" name="keyname" class="text"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<label for="sitename">اسم الموقع：</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<label for="siteurl">عنوان الموقع：</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<input type="button" onclick="save()" value="إضافة سجل جديد"/>　　
　　　　　　　　<hr/>　　
　　　　　　　　<label for="search_phone">إدخل الاسم البديل (المفتاح)：</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>　　
　　　　　　　　<input type="button" onclick="find()" value="البحث عن الموقع"/>　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　// حفظ البيانات　　
　　　　function save(){}　　
　　　　　　　　var site = new Object;
　　　　　　　　site.keyname = document.getElementById("keyname").value;
　　　　　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　　　　　var str = JSON.stringify(site); // 将对象转换为字符串
　　　　　　　　localStorage.setItem(site.keyname,str);　　
　　　　　　　　alert("保存成功");
　　　　}　　
　　　　// 查找数据　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var str = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");
　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;　　
　　　　}　　
　　　　
　　　　// 将所有存储在 localStorage 中的对象提取出来，并展现到界面上
　　　　// 确保存储的 keyname 对应的值为转换对象，否则 JSON.parse 会报错
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";　　
　　　　　　　　　　　　for(var i=0; i<localStorage.length; i++){　
　　　　　　　　　　　　　　　　var keyname = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var str = localStorage.getItem(keyname);　　
　　　　　　　　　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　　　　　　　　　result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result += "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "البيانات فارغة...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>

اختبار النظر في ‹/›

قام loadAll بنقل جميع البيانات المخزنة، يجب التأكد من أن البيانات المخزنة في localStorage تكون في تنسيق JSON، وإلا سيتم إظهار خطأ JSON.parse(str).

عرض النتائج

قاعدة البيانات المحلية في HTML5 عناصر الاصطلاحية في HTML5