HTML Local Storage

HTML Local Storage: ບຸງຄຸນກວ່າ cookies.

ຫຍັງຈະເອີ້ນວ່າ HTML Local Storage?

ກ່າວໂດຍການບັນຄັບພາບລະບາຍທີ່ມາຈາກພາກພື້ນທຳເວັບຂາວ (Local Storage), ຄວາມປະສົງພາບຂອງ web ສາມາດບັນຄັບຂໍ້ມູນຢູ່ພາບລະບາຍທີ່ຢູ່ພາບລະບາຍຂອງຜູ້ຄົນ.

ກ່ອນ HTML5, ຂໍ້ມູນຂອງຄວາມປະສົງພາບບໍ່ສາມາດບັນຄັບໄດ້ໃນ cookie, ລວມທັງການຮ້ອງຂໍຈາກສະຖານທີ່. ການບັນຄັບພາບລະບາຍທີ່ມາຈາກພາກພື້ນທຳເວັບຂາວແມ່ນຄວາມປອດໄພຫຼາຍຫຼາຍ ແລະສາມາດບັນຄັບຂໍ້ມູນຫຼາຍຫຼາຍຂອງພາບລະບາຍທີ່ມາຈາກພາກພື້ນທຳເວັບຂາວທີ່ບໍ່ດັງຄວາມສະຫຼາກຂອງເວັບໄຊ.

ບໍ່ດຽວກັບ cookie, ການບັນຄັບຂອງການບັນຄັບແມ່ນຫຼາຍຫຼາຍຫຼາຍ (ຢ່າງໜ້ອຍ 5MB), ແລະຂໍ້ມູນຈະບໍ່ຖືກສົ່ງໄປຫາສະຖານທີ່ບໍລິການ.

ການບັນຄັບພາບລະບາຍທີ່ມາຈາກພາກພື້ນທຳເວັບຂາວ (origin) (ຈາກເຂດດ້ານເຂດແລະຂໍ້ຕາມ). ທຸກໆໜ້າ, ຈາກພາກພື້ນທຳເວັບຂາວ, ສາມາດບັນຄັບຂໍ້ມູນຄືກັນ ແລະເຂົ້າເຖິງຂໍ້ມູນດັ່ງກ່າວ.

ການສະໜັບສະໜຸນບາຣເບີ້

ອີກຄັນໃນຕາລາງຈະສະແດງຄຳຕາມທີ່ບັນດາບາຣເບີ້ສະໜັບສະໜຸນການບັນທຶກທີ່ພາຍໃນຄົນໃຊ້:

API
Web Storage 4.0 8.0 3.5 4.0 11.5

ໂອບາສການ HTML 本地存储

ການບັນທຶກທີ່ພາຍໃນ HTML ສະໜັບສະໜຸນສອງໂອບາສການໃນທີ່ພາຍໃນຄົນໃຊ້:

  • window.localStorage - ບັນທຶກຂໍ້ມູນທີ່ບໍ່ມີວັນຂອງການຫັກ
  • window.sessionStorage - ບັນທຶກຂໍ້ມູນໃຫ້ກັບຄັນສະຖານທີ່ຂອງການເຂົ້າຫາ (ຂໍ້ມູນຈະຖືກລຶບອອກເວລາທີ່ບັນດາຄົນປິດບານບາດຫວ່າງການເຂົ້າຫາ)

ບໍ່ວ່າທ່ານກຳລັງໃຊ້ການຄັດພິນພາກສະຖານທີ່ທີ່ຢູ່ພາຍໃນ, ທ່ານຄວນກວດກາການສະໜັບສະໜຸນຂອງ localStorage ແລະ sessionStorage:

if (typeof(Storage) !== "undefined") {
    // ການຂັດແຍ່ງສຳນັກງານ localStorage/sessionStorage
} else {
    // ຂ້ອຍບໍ່ສາມາດສະໜັບສະໜຸນ Web Storage ..
}

ໂອບາສການ localStorage

ໂອບາສການ localStorage ແມ່ນບັນທຶກຂໍ້ມູນທີ່ບໍ່ມີວັນຂອງການຫັກ. ເວລາທີ່ບັນດາຄົນປິດບານບາດຫວ່າງການບັນທຶກ, ຂໍ້ມູນຈະບໍ່ຖືກລຶບອອກ, ແລະຈະມີຄວາມສາມາດໃນມື້, ອາທິດ, ຫຼືປີທີ່ຈະຕໍ່ມາ:

ຕົວຢ່າງ

// ບັນທຶກ
localStorage.setItem("lastname", "Gates");
// ຊອກຫາ
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

ການທົດລອງດ້ວຍຕົວເອງ

ຄວາມເຫັນທີ່ມີຄວາມຈິງ:

  • ສ້າງຄຳຂັດແຍ່ງ/ຄຳຂັດແຍ່ງ localStorage, ທີ່: name="lastname", value="Gates"
  • ຊອກຫາຄຳຂັດແຍ່ງ "lastname" ແລະບັນທຶກມັນເຂົ້າໃນປະກອບສັບ id="result"

ບົດສະຫຼຸບນີ້ຍັງສາມາດຂຽນເທີງ:

// ບັນທຶກ
localStorage.lastname = "Gates";
// ຊອກຫາ
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 = "ທ່ານໄດ້ກົດລະບຽບບັນຊີນັ້ນ " +
localStorage.clickcount + " ຄັ້ງ.";

ການທົດລອງດ້ວຍຕົວເອງ

sessionStorage ເປັນບັນດາ sessionStorage

sessionStorage ເປັນບັນດາ sessionStorage ທີ່ບໍ່ກ່ຽວກັບ localStorage ທີ່ພຽງແຕ່ບັນດາ sessionStorage ທີ່ພຽງແຕ່ບັນດາ sessionStorage. ຖ້າຜູ້ນຳໃຊ້ປິດໜ້າບັນຊີສະໜາມບັນຊີຫນັງບັນຊີຈະຖືກກຳຈັດລົງ.

ຕົວຢ່າງນີ້ຈະຂຽນຄຳປິດປະຕູບັນຊີທີ່ຄົນນາຍນົດກົດລະບຽບບັນຊີນັ້ນໃນ session ນີ້:

ຕົວຢ່າງ

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "ໃນ session ນີ້，ທ່ານໄດ້ກົດລະບຽບບັນຊີນັ້ນ " +
sessionStorage.clickcount + " ຄັ້ງ.";

ການທົດລອງດ້ວຍຕົວເອງ