localStorage & JSON

localStorage & JSON

localStorage ให้เก็บข้อมูลใน browser ที่คงอยู่แม้ปิดแล้วเปิดใหม่ — เหมาะสำหรับ user preferences, drafts, simple app state

JSON.stringify & JSON.parse

JavaScript

const user = { name: "สมชาย", age: 28, skills: ["JS", "React"] };

// Object → JSON string
const jsonString = JSON.stringify(user);
console.log(jsonString);
// '{"name":"สมชาย","age":28,"skills":["JS","React"]}'

// JSON string → Object
const parsed = JSON.parse(jsonString);
console.log(parsed.name); // "สมชาย"

// pretty print (indent 2 spaces)
console.log(JSON.stringify(user, null, 2));

Python

import json
json_string = json.dumps(user, ensure_ascii=False)
parsed = json.loads(json_string)

C

// C ใช้ library เช่น cJSON
cJSON *json = cJSON_CreateObject();
cJSON_AddStringToObject(json, "name", "สมชาย");
char *str = cJSON_Print(json);

SQL

-- PostgreSQL มี JSON type
SELECT '{"name": "สมชาย"}'::jsonb -> 'name';
-- หรือ JSON functions
SELECT jsonb_build_object('name', 'สมชาย', 'age', 28);

Caution

JSON.parse() จะ throw error ถ้า string ไม่ใช่ valid JSON — ควรใส่ try/catch เสมอ

localStorage API

// เก็บค่า (รับ string เท่านั้น)
localStorage.setItem("theme", "dark");
localStorage.setItem("lang", "th");

// อ่านค่า
const theme = localStorage.getItem("theme"); // "dark"

// ลบ key
localStorage.removeItem("theme");

// ลบทั้งหมด
localStorage.clear();

// เช็คจำนวน keys
console.log(localStorage.length);

เก็บ Object / Array

// เก็บ object — ต้อง stringify ก่อน
const settings = { theme: "dark", fontSize: 16, lang: "th" };
localStorage.setItem("settings", JSON.stringify(settings));

// อ่านกลับ — ต้อง parse
const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.theme); // "dark"

Helper Functions

// safe save
function saveToStorage(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (error) {
    console.error("Storage save failed:", error.message);
    return false;
  }
}

// safe load with default
function loadFromStorage(key, defaultValue = null) {
  try {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  } catch (error) {
    console.error("Storage load failed:", error.message);
    return defaultValue;
  }
}

// ใช้งาน
saveToStorage("todos", [{ text: "ซื้อของ", done: false }]);
const todos = loadFromStorage("todos", []);

Tip

สร้าง helper functions แบบนี้ไว้ใช้ซ้ำ — ป้องกัน crash จาก corrupt data ใน storage

ข้อจำกัดของ localStorage

ข้อจำกัด	รายละเอียด
ขนาด	~5-10 MB ต่อ origin
ชนิดข้อมูล	string เท่านั้น (ต้อง stringify)
Scope	ต่อ origin (domain + port)
Sync	synchronous — block main thread
Security	ไม่ควรเก็บ sensitive data (passwords, tokens)

Caution

อย่าเก็บ passwords หรือ tokens ใน localStorage — ใช้ httpOnly cookies แทนสำหรับ auth

sessionStorage

// sessionStorage — เหมือน localStorage แต่หายเมื่อปิด tab
sessionStorage.setItem("temp", "ค่าชั่วคราว");
const temp = sessionStorage.getItem("temp");
// ปิด tab → หายไป

เมื่อไหร่ควรใช้อะไร?

Use Case	เลือก
User preferences (theme, lang)	localStorage
Shopping cart	localStorage
Form draft	sessionStorage
Auth tokens	httpOnly cookie
Large data	IndexedDB