HTML Web Storage API
HTML ဝဘ်သိုလှောင်မှု; cookies တွေထက် ပိုကောင်းပါတယ်။
HTML Web Storage ဆိုတာ ဘာလဲ။
ဝဘ်သိုလှောင်မှုဖြင့်၊ ဝဘ်အက်ပ်လီကေးရှင်းသည် အသုံးပြုသူ၏ဘရောက်ဆာအတွင်း ဒေတာများကို စက်တွင်း၌ သိမ်းဆည်းနိုင်သည်။
HTML5 မတိုင်မီ၊ ဆာဗာတောင်းဆိုမှုတိုင်းတွင် ထည့်သွင်းထားသော အပလီကေးရှင်းဒေတာကို cookies များတွင် သိမ်းဆည်းထားရမည်ဖြစ်သည်။ ဝဘ်သိမ်းဆည်းမှုသည် ပိုမိုလုံခြုံပြီး ဝဘ်ဆိုက်စွမ်းဆောင်ရည်ကို မထိခိုက်စေဘဲ ဒေတာအများအပြားကို စက်တွင်း၌ သိမ်းဆည်းနိုင်သည်။
ကွတ်ကီးများနှင့်မတူဘဲ၊ သိုလှောင်မှုကန့်သတ်ချက်သည် ပိုကြီးသည် (အနည်းဆုံး 5MB) ဖြစ်ပြီး အချက်အလက်များကို ဆာဗာသို့ ဘယ်သောအခါမှ လွှဲပြောင်းပေးမည်မဟုတ်ပါ။
ဝဘ်သိုလှောင်မှုသည် မူရင်းတစ်ခု (ဒိုမိန်းနှင့် ပရိုတိုကောတစ်ခုစီ) ဖြစ်သည်။ စာမျက်နှာအားလုံး၊ မူရင်းတစ်ခုတည်းမှ၊ တူညီသောဒေတာကို သိမ်းဆည်းနိုင်ပြီး ဝင်ရောက်နိုင်သည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ဝဘ်သိုလှောင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Web Storage Objects
HTML web storage သည် client ပေါ်တွင် data သိမ်းဆည်းရန်အတွက် object နှစ်ခုကို ပံ့ပိုးပေးသည်-
window.localStorage- သက်တမ်းကုန်ဆုံးရက်စွဲမရှိဘဲ data တွေကိုသိမ်းဆည်းပါ။window.sessionStorage- စက်ရှင်တစ်ခုအတွက် ဒေတာကို သိမ်းဆည်းထားပါ (ဘရောက်ဆာတက်ဘ်ကို ပိတ်လိုက်သောအခါ ဒေတာများ ပျောက်ဆုံးသွားသည်)
ဝဘ်သိုလှောင်မှုကို အသုံးမပြုမီ၊ localStorage နှင့် sessionStorage အတွက် ဘရောက်ဆာပံ့ပိုးမှုကို စစ်ဆေးပါ-
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
localStorage Object
localStorage object သည် ဒေတာကို သက်တမ်းကုန်ဆုံးရက်မရှိဘဲ သိမ်းဆည်းထားသည်။ ဘရောက်ဆာကို ပိတ်သည့်အခါ ဒေတာကို ဖျက်မည်မဟုတ်ပါ၊ နောက်နေ့၊ အပတ် သို့မဟုတ် တစ်နှစ်တွင် ရနိုင်ပါမည်။
ဥပမာ
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
ဥပမာ ရှင်းပြထားသည်-
- name="lastname" နှင့် value="Smith" ဖြင့် localStorage အမည်/တန်ဖိုးအတွဲကို ဖန်တီးပါ။
- "နောက်ဆုံးအမည်" ၏တန်ဖိုးကိုရယူပြီး id="ရလဒ်" ဖြင့်ဒြပ်စင်ထဲသို့ထည့်ပါ။
အထက်ဖော်ပြပါ ဥပမာကိုလည်း ဤကဲ့သို့ ရေးသားနိုင်သည်။
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
"နောက်ဆုံးအမည်" localStorage item ကိုဖယ်ရှားခြင်းအတွက် syntax မှာ အောက်ပါအတိုင်းဖြစ်သည်-
localStorage.removeItem("lastname");
မှတ်ချက်- အမည်/တန်ဖိုးအတွဲများကို စာကြောင်းများအဖြစ် အမြဲသိမ်းဆည်းထားသည်။ လိုအပ်ပါက ၎င်းတို့ကို အခြားဖော်မတ်သို့ ပြောင်းရန် မမေ့ပါနှင့်။
အောက်ဖော်ပြပါ ဥပမာသည် သုံးစွဲသူတစ်ဦး ခလုတ်တစ်ခုကို နှိပ်သည့်အကြိမ်အရေအတွက်ကို ရေတွက်သည်။ ဤကုဒ်တွင် တန်ပြန်ပမာဏကို တိုးမြှင့်နိုင်စေရန် တန်ဖိုးစာတန်းကို နံပါတ်တစ်ခုအဖြစ်သို့ ပြောင်းလဲသွားသည်-
ဥပမာ
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
sessionStorage Object
အရာဝတ္ထုသည် စက် ရှင်တစ်ခုအတွက်
ဒေတာကို သိမ်းဆည်းထား မှလွဲ၍sessionStorage အရာဝတ္ထုသည် localStorage အရာဝတ္ထုနှင့် ညီမျှသည် ။ အသုံးပြုသူသည် သီးခြားဘရောက်ဆာတက်ဘ်ကို ပိတ်သည့်အခါ ဒေတာကို ဖျက်လိုက်ပါသည်။
အောက်ဖော်ပြပါ ဥပမာသည် လက်ရှိ စက်ရှင်တွင် အသုံးပြုသူ ခလုတ်တစ်ခုကို နှိပ်လိုက်သည့် အကြိမ်အရေအတွက်ကို ရေတွက်သည်-
ဥပမာ
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";