Quartz 🪬

Web Storage

3 min read

Definition

Web storage là một tính năng mới của JS nhằm hỗ trợ trong việc lưu dữ liệu.

Có hai loại web storage là:

  • localStorage: lưu trữ vĩnh viễn, chỉ mất khi xóa lịch sử về web đó.
  • sessionStorage: lưu trữ trong phiên làm việc của trang web (từ lúc mở tab đến lúc đóng tab), sẽ mất khi user đóng tab.

Important

Cần phân biệt rõ ràng giữa localStorage và sessionStorage đối với mỗi trang web là khác nhau. Nói cách khác, mỗi trang web có một localStorage và một sessionStorage riêng.

Dữ liệu được lưu dưới dạng localStorage hay sessionStorage tùy thuộc vào browser và protocol. Dung lượng lưu trữ cũng phụ thuộc vào browser và protocol.

Các trường hợp đặc thù sử dụng sessionStorage:

  • Muốn loại bỏ dữ liệu ngay khi đóng tab.
  • Muốn ứng dụng không can thiệp vào chính ứng dụng đó ở bên cửa sổ khác.

Attention

Lưu ý là không lưu các thông tin nhạy cảm như mật khẩu trong web storage.

Web Storage Objects & Methods

Trang web cung cấp hai đối tượng để lưu trữ thông tin bên phía client:

  • window.localStorage - lưu dữ liệu không có thời hạn (no expiration date).
  • window.sessionStorage - lưu dữ liệu cho một phiên làm việc.

Các phương thức của localStorage và sessionStorage là tương tự nhau. Các phương thức thường dùng là: setItem, getItem, removeItem, clear và key.

setItem

Chức năng: lưu dữ liệu trong local/sessionStorage. Đối số là một cặp key và value nằm trong dấu ngoặc kép (vì dữ liệu được lưu dưới dạng chuỗi JSON). Lưu dữ liệu trùng key sẽ ghi đè giá trị của lần thực hiện phương thức cuối cùng.

Cú pháp: sessionStorage.setItem('key', 'value')

Lưu ý: nếu muốn lưu array hoặc object, cần chuyển sang dạng chuỗi dùng phương thức stringify. Nếu không chuyển thì có thể mất cấu trúc của dữ liệu khi lưu vào local/sessionStorage.

Info

Có thể xem dữ liệu được lưu ở tab Application của trình duyệt nhân Chromium và ở tab Storage của trình duyệt Firefox.

Strings

// Since the value is string we do not need to stringify it
sessionStorage.setItem("firstName", "Quân")
 
console.log(sessionStorage) // Storage {firstName: 'Quân', length: 1}

Kết quả:

Numbers

sessionStorage.setItem("age", 20)
 
console.log(sessionStorage) //  Storage {age: '20', firstName: 'Quân', length: 2}

Kết quả:

Arrays

// Array has to be stringified first to keep the format.
const skills = ["HTML", "CSS", "JS", "React"]
const skillsJSON = JSON.stringify(skills, undefined, 4)
 
sessionStorage.setItem("skills", skillsJSON)

Kết quả:

Tương tự đối với object.

List of Objects

const skillsArray = [
	{ tech: "HTML", level: 10 },
	{ tech: "CSS", level: 9 },
	{ tech: "JS", level: 8 },
	{ tech: "React", level: 9 },
	{ tech: "Redux", level: 10 },
	{ tech: "Node", level: 8 },
	{ tech: "MongoDB", level: 8 },
]
const skillJSON = JSON.stringify(skillsArray)
 
sessionStorage.setItem("skills", skillJSON)

Kết quả:

getItem

Chức năng: lấy dữ liệu từ local/sessionStorage dựa vào key.

Cú pháp: sessionStorage.getItem('key').

Ví dụ:

let firstName = sessionStorage.getItem("firstName")
let age = sessionStorage.getItem("age")
const skills = sessionStorage.getItem("skills")
 
console.log(firstName, age, skills)

Kết quả:

Như đã thấy, giá trị của skills là một mảng các object, có thể dùng phương thức parse để tách thành object

const skillsObj = JSON.parse(skills)
 
console.log(skillsObj)

Kết quả:

clear

Chức năng: dọn sạch dữ liệu lưu ở trong local/sessionStorage.

Cú pháp: localStorage.clear()

table tags as Tags, file.cday as Created
from [[Web Storage]]
sort file.ctime asc

Backlinks