HTML вэб агуулах; cookie-ээс илүү сайн.
HTML Вэб агуулах гэж юу вэ? #
Вэб агуулахын тусламжтайгаар вэб програмууд хэрэглэгчийн хөтөч дотор өгөгдлийг хадгалах боломжтой.
HTML5-ээс өмнө програмын өгөгдлийг серверийн хүсэлт бүрт багтаасан күүкийд хадгалах шаардлагатай байв. Вэб агуулах нь илүү аюулгүй бөгөөд вэбсайтын гүйцэтгэлд нөлөөлөхгүйгээр их хэмжээний өгөгдлийг дотооддоо хадгалах боломжтой.
Күүкигээс ялгаатай нь хадгалах хязгаар нь хамаагүй том (дор хаяж 5МБ) бөгөөд мэдээллийг сервер рүү хэзээ ч дамжуулдаггүй.
Хөтөчийн дэмжлэг #
| API | chrome | internet explorer | mozilaf firefox | safari | opera |
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
} HTML вэб агуулахын обьектууд #
HTML web storage provides two objects for storing data on the client:
HTML веб агуулах нь хэрэглэгчид дээр хадаглагдах 2 обьектоор хангаж өгдөг
window.localStorage– хугацаа дуусахгүйгээр өгөгдлийг хадгалдагwindow.sessionStorage– өгөгдлийг нэг хэсэг хадгалдаг (хөтчийн таб хаагдах үед өгөгдөл алдагдах болно)
Вэб хадгалах агуулах ашиглахаасаа өмнө localStorage болон sessionStorage-ийн хөтчийн дэмжлэгийг шалгана уу.
The localStorage Object #
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
// 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; “Lastname” localStorage зүйлийг устгах синтакс дараах байдалтай байна.
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 объект #
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."; 
