JavaScript үндэс / LocalStorage ба SessionStorage

LocalStorage ба SessionStorage

Хэрэглэгч хуудсыг дахин нээхэд маягтын бичсэн зүйл арилдаг, тохиргоо алдагддаг — учир нь JavaScript-ийн хувьсагчид хуудас хаагдахад устдаг. LocalStorage ба SessionStorage нь өгөгдлийг хөтчид байнга (эсвэл session-ийн туршид) хадгалдаг.

LocalStorage үндэс

LocalStorage-т өгөгдөл хадгалахад setItem, авахад getItem ашиглана. Хуудас хаагдсан ч, хөтөч дахин нээгдсэн ч өгөгдөл хэвээр байна:

javascript

// Хадгалах
localStorage.setItem("хэрэглэгч_нэр", "Болд");
localStorage.setItem("хэл", "mn");

// Авах
const нэр = localStorage.getItem("хэрэглэгч_нэр");
console.log(нэр); // Болд

// Устгах
localStorage.removeItem("хэл");

// Бүгдийг устгах
localStorage.clear();

Анхааруулга: getItem нь байхгүй key-д null буцаана — ашиглахаасаа өмнө шалгаарай.

Зөвхөн текст хадгалдаг

LocalStorage нь зөвхөн текст (string) хадгалдаг. Тоо, boolean, объект хадгалахдаа JSON.stringify ашиглан текст болгоно, авахдаа JSON.parse-ааp буцааж задална:

javascript

// Объект хадгалах
const хэрэглэгч = { нэр: "Болд", нас: 25, нэвтэрсэн: true };
localStorage.setItem("хэрэглэгч", JSON.stringify(хэрэглэгч));

// Объект авах
const хадгалагдсан = localStorage.getItem("хэрэглэгч");
const задалсан = JSON.parse(хадгалагдсан);
console.log(задалсан.нэр); // Болд
console.log(задалсан.нас); // 25

JSON.parse(null) алдаа гаргадаггүй ч тохиолдол бүрт шалгах нь найдвартай:

javascript

function хадгалагдсан авах(key) {
  const утга = localStorage.getItem(key);
  if (!утга) return null;

  try {
    return JSON.parse(утга);
  } catch {
    return утга; // JSON биш текст бол шууд буцаана
  }
}

Бодит жишээ: харанхуй горим

Хэрэглэгчийн сонголтыг LocalStorage-д хадгалж, дараагийн уталт ч санах:

javascript

const харанхуй товч = document.querySelector("#харанхуй-товч");

// Хуудас нээгдэхэд хадгалагдсан тохиргоо ачаалах
const хадгалагдсан горим = localStorage.getItem("харанхуй_горим");
if (хадгалагдсан горим === "true") {
  document.body.classList.add("харанхуй");
}

// Товч дарагдахад өөрчлөх ба хадгалах
харанхуй товч.addEventListener("click", () => {
  document.body.classList.toggle("харанхуй");

  const идэвхтэй = document.body.classList.contains("харанхуй");
  localStorage.setItem("харанхуй_горим", идэвхтэй);
});

SessionStorage

SessionStorage нь LocalStorage-тэй яг ижил API-тай — зөвхөн нэг ялгаатай: tab хаагдахад өгөгдөл устдаг. Нэвтрэх үеийн түр мэдээлэл, маягтын алхамт явц зэрэгт тохиромжтой:

javascript

// Маягтын явцыг хадгалах
sessionStorage.setItem("маягт_алхам", "2");
sessionStorage.setItem("и_мэйл_оруулсан", "bolod@mail.mn");

const алхам = sessionStorage.getItem("маягт_алхам");
console.log(алхам); // 2

// Tab хаагдахад автоматаар устдаг — гараар устгах шаардлагагүй

LocalStorage vs SessionStorage

Аль нэгийг сонгохдоо нэг асуулт тавь:

код

Хэрэглэгч дахин ирэхэд ч санах хэрэгтэй юу?
  ├─ Тийм → LocalStorage
  │         (тохиргоо, нэвтрэлт, сагс, дуртай жагсаалт)
  └─ Үгүй → SessionStorage
            (маягтын явц, нэг удаагийн мэдэгдэл)

Хэмжээний хязгаар ба нууцлал

javascript

// Хэдэн байт ашиглаж байгааг харах
let нийт = 0;
for (const key in localStorage) {
  нийт += localStorage.getItem(key).length;
}
console.log("Ашигласан: ~" + Math.round(нийт / 1024) + " KB");

Хоёр чухал анхааруулга: LocalStorage нь ~5MB хязгаартай — том зураг эсвэл урт жагсаалт хадгалахад болгоомжтой байх. Мөн LocalStorage нь нууц биш — нууц үг, токен хадгалж болохгүй. Эдгээрт сервер тал эсвэл cookie httpOnly ашиглана.

Дараагийн хичээлд:

JSON өгөгдлийн формат — JSON.stringify ба JSON.parse-ийг нарийвчлан, мөн API-аас ирсэн JSON-ийг хэрхэн боловсруулах талаар үзнэ.

← Өмнөх хичээлМаягт ба баталгаажуулалт Дараах хичээл →JSON өгөгдөл