Hướng dẫn access session storage javascript - truy cập lưu trữ phiên javascript

Sự khác nhau và cách sử dụng Local Storage, Session Storage và Cookie

Bạn bị lẫn lộn giữa session storage, local storage và cookies? Bài viết dưới đây sẽ giúp bạn hiểu rõ được sự khác nhau giữa 3 cách lưu trữ này. Các kiểu không gian lưu trữ khác nhau có sẵn cho các dữ liệu có thể trên máy chủ hoặc máy khách, cho phép chúng ta chọn lựa theo nhu cầu.session storage, local storage và cookies? Bài viết dưới đây sẽ giúp bạn hiểu rõ được sự khác nhau giữa 3 cách lưu trữ này. Các kiểu không gian lưu trữ khác nhau có sẵn cho các dữ liệu có thể trên máy chủ hoặc máy khách, cho phép chúng ta chọn lựa theo nhu cầu.

1. Local storage

Giới thiệu:

• Khả năng lưu trữ vô thời hạn: Có nghĩa là chỉ bị xóa bằng JavaScript, hoặc xóa bộ nhớ trình duyệt, hoặc xóa bằng localStorage API.
• Lưu trữ được 5MB: Local Storage cho phép bạn lưu trữ thông tin tương đối lớn lên đến 5MB, lưu được lượng thông tin lớn nhất trong 3 loại.
• Không gửi thông tin lên server như Cookie nên bảo mật tốt hơn.

Trình duyệt hỗ trợ:

Trình duyệt	Phiên bản
Chrome	>= 4.0
Internet Explorer / Edge	>= 8.0
Firefox	>= 3.5
Safari	>= 4.0
Chrome	>= 4.0

Internet Explorer / Edge

if (typeof(Storage) !== 'undefined') {
    //Nếu có hỗ trợ
    //Thực hiện thao tác với Storage
    alert('Trình duyệt của bạn hỗ trợ Storage');
} else {
    //Nếu không hỗ trợ
    alert('Trình duyệt của bạn không hỗ trợ Storage');
}

>= 8.0

Firefox

Chọn tab Application, di chuyển đến Storage để thấy các Storage của trình duyệt. Để xem các local Storage đang được lưu trữ, mở rộng phần Local Storage như hình. Ở đây ta có thể thấy có 2 biến Local Storage đang được lưu là pusherTransportEncrypted và lang với giá trị của 2 biến được hiển thị bên cạnh (cột Value). Như vậy, cột Key chính là danh sách các biến local Storage đang được lưu và cột Value là các giá trị tương ứng. Để xóa hết các giá trị local Storage này đi, bạn có thể chọn biểu tượng cấm (Clear All) hoặc chọn bên cạnh là biểu tượng dấu X (Delete Selected).

>= 3.5

• Safari

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

>= 11.5

• Để kiểm tra xem trình duyệt có hỗ trợ localStorage hay không thì chúng ta dùng

  localStorage.setItem('key', 'value');
  // hoặc
  localStorage.key = 'value';
  // hoặc
  localStorage['key'] = 'value';
  

  7 như sau:

localStorage.getItem('key');
// hoặc
localStorage.key;

Xem localStorage bằng trình duyệt cụ thể như sau:

• Để xem localstorage bằng trình duyệt các bạn vào trang web cần xem (ở đây mình ví dụ với trang web http://book.framgia.vn/) và sau đó các bạn ấn F12 (hoặc Ctrl + shift + i) sau đó làm theo như hình sau: Chọn tab Application, di chuyển đến Storage để thấy các Storage của trình duyệt. Để xem các local Storage đang được lưu trữ, mở rộng phần Local Storage như hình. Ở đây ta có thể thấy có 2 biến Local Storage đang được lưu là pusherTransportEncrypted và lang với giá trị của 2 biến được hiển thị bên cạnh (cột Value). Như vậy, cột Key chính là danh sách các biến local Storage đang được lưu và cột Value là các giá trị tương ứng. Để xóa hết các giá trị local Storage này đi, bạn có thể chọn biểu tượng cấm (Clear All) hoặc chọn bên cạnh là biểu tượng dấu X (Delete Selected).

localStorage.length();

Sử dụng

if (typeof(Storage) !== "undefined") {
    //Nếu hỗ trợ
    var data = localStorage.length;
    console.log(data);
} else {
    // Nếu không hỗ trợ
    alert('Trình duyệt của bạn không hỗ trợ');
}

• Khởi tạo localStorage

localStorage.removeItem(key);

Trong đó:

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

8 là tên biến,

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

9 là giá trị của biến muốn gán vào.

localStorage.clear();

Để lấy giá trị localStorage và sử dụng, ta dùng localStorage.getItem('key'); // hoặc localStorage.key; 0

Giới thiệu:

• Ví dụ cụ thể như sau:
• Để lấy số lượng localStorage đã có trong trình duyệt, sử dụng

  localStorage.getItem('key');
  // hoặc
  localStorage.key;
  

  1 như sau:
• Ví dụ
• Để xóa 1 biến trong localStorage, sử dụng

  localStorage.getItem('key');
  // hoặc
  localStorage.key;
  

  2

Hoặc xóa tất cả các biến trong localStorage, sử dụng localStorage.getItem('key'); // hoặc localStorage.key; 3

Trình duyệt	Phiên bản
Chrome	>= 4.0
Internet Explorer / Edge	>= 8.0
Firefox	>= 3.5
Safari	>= 4.0
Internet Explorer / Edge	>= 8.0

Firefox

>= 3.5

Safari

>= 3.5

Safari

if ( typeof(Storage) !== 'undefined') {
    // Khởi tạo sesionStorage
    sessionStorage.setItem('name', 'Ted Mosby');
    // get sessionStorage
    sessionStorage.getItem('name');
    // lấy ra số lượng session đã lưu trữ
    sessionStorage.length;
    // xóa 1 item localStorage
    sessionStorage.removeItem('name');
    // xóa tất cả item trong sessionStorage
    sessionStorage.clear();
} else {
    alert('Trình duyệt của bạn không hỗ trợ!');
}

>= 11.5

Giới thiệu:

• Để kiểm tra xem trình duyệt có hỗ trợ localStorage hay không thì chúng ta dùng

  localStorage.setItem('key', 'value');
  // hoặc
  localStorage.key = 'value';
  // hoặc
  localStorage['key'] = 'value';
  

  7 như sau:
• Xem localStorage bằng trình duyệt
• Để xem localstorage bằng trình duyệt các bạn vào trang web cần xem (ở đây mình ví dụ với trang web http://book.framgia.vn/) và sau đó các bạn ấn F12 (hoặc Ctrl + shift + i) sau đó làm theo như hình sau: Chọn tab Application, di chuyển đến Storage để thấy các Storage của trình duyệt. Để xem các local Storage đang được lưu trữ, mở rộng phần Local Storage như hình. Ở đây ta có thể thấy có 2 biến Local Storage đang được lưu là pusherTransportEncrypted và lang với giá trị của 2 biến được hiển thị bên cạnh (cột Value). Như vậy, cột Key chính là danh sách các biến local Storage đang được lưu và cột Value là các giá trị tương ứng. Để xóa hết các giá trị local Storage này đi, bạn có thể chọn biểu tượng cấm (Clear All) hoặc chọn bên cạnh là biểu tượng dấu X (Delete Selected).
• Sử dụng

Khởi tạo localStorage

Trong đó:

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

8 là tên biến,

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

9 là giá trị của biến muốn gán vào.

>= 3.5

Safari

• >= 11.5

document.cookie = 'username=Ted Mosby';

Để kiểm tra xem trình duyệt có hỗ trợ localStorage hay không thì chúng ta dùng

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

7 như sau:

document.cookie = 'username=Ted Mosby; expires=Thu, 18 Dec 2018 8:00:00 UTC';

Xem localStorage bằng trình duyệt

Để xem localstorage bằng trình duyệt các bạn vào trang web cần xem (ở đây mình ví dụ với trang web http://book.framgia.vn/) và sau đó các bạn ấn F12 (hoặc Ctrl + shift + i) sau đó làm theo như hình sau: Chọn tab Application, di chuyển đến Storage để thấy các Storage của trình duyệt. Để xem các local Storage đang được lưu trữ, mở rộng phần Local Storage như hình. Ở đây ta có thể thấy có 2 biến Local Storage đang được lưu là pusherTransportEncrypted và lang với giá trị của 2 biến được hiển thị bên cạnh (cột Value). Như vậy, cột Key chính là danh sách các biến local Storage đang được lưu và cột Value là các giá trị tương ứng. Để xóa hết các giá trị local Storage này đi, bạn có thể chọn biểu tượng cấm (Clear All) hoặc chọn bên cạnh là biểu tượng dấu X (Delete Selected).

• Sử dụng

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

1

Khởi tạo localStorage

Trong đó:

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

8 là tên biến,

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

9 là giá trị của biến muốn gán vào.

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

2

Tham số truyền vào là

localStorage.getItem('key');
// hoặc
localStorage.key;

7 - tên cookie muốn lấy giá trị.

Tạo một biến

localStorage.getItem('key');
// hoặc
localStorage.key;

8 và thêm vào "=" để tìm kiếm trong chuỗi

localStorage.getItem('key');
// hoặc
localStorage.key;

4

Chia

localStorage.getItem('key');
// hoặc
localStorage.key;

4 dựa trên dấu

localStorage.length();

1 thành một mảng nhiều phần tử và gán mảng đấy cho biến

localStorage.length();

2

Vòng lặp

localStorage.length();

3 để đọc mỗi giá trị

localStorage.length();

4

Nếu cookie được tìm thấy

localStorage.length();

5, trả về giá trị của cookie

localStorage.length();

6. Nếu cookie không được tìm thấy, trả về

localStorage.length();

7

Ví dụ muốn lấy giá trị của cookie tên là

localStorage.length();

8 thì ta có thể gọi

localStorage.length();

9 và kêt quả trả về là giá trị của cookie có tên đó.

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

3

Kết quả:

• Thay đổi giá trị cookie: Trong javascript, bạn có thể thay đổi một cookie giống như cách mà bạn tạo ra cookie, tức là ghi đè giá trị mới lên cookie đã có:

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

4

• Kiểm tra cookie: Để kiểm tra coookie, có thể xây dựng hàm như sau:

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

5

Nếu cookie được thiết lập, nó sẽ hiển thị một lời chào

Nếu cookie không được thiết lập, nó sẽ hiển thị một prompt box, hỏi tên của người dùng, lưu trữ tên của người dùng ở cookie trong 365 ngày, bằng việc gọi function setCookie đã được viết ở trên

• Xóa cookie: Để xóa một cookie chỉ cần xét lại giá trị ngày hết hạn expires về một thời điểm đã qua

localStorage.setItem('key', 'value');
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';

6

Tham khảo tại https://www.w3schools.com/js/js_cookies.asp

4. Thông tin thêm

• Vì localStorage và sessionStorage được lưu trữ trên trình duyệt của người dùng, nên các bạn cần phải xem xét nội dung lưu trữ có liên quan đến vấn đề bảo mật hay không.
• Và cũng chính vì localStorage và sessionStorage được lưu trữ trên trình duyệt nên việc sử dụng nó sẽ không ảnh hưởng đến hiệu xuất của trang web nhưng nó sẽ làm nặng trình duyệt của người dùng (không đáng kể).
• Về phạm vi: sessionStorage: giới hạn trong một cửa sổ hoăc thẻ của trình duyệt. Một trang web được mở trong hai thẻ của cùng một trình duyệt cũng không thể truy xuất dữ liệu lẫn nhau. Như vậy, khi bạn đóng trang web thì dữ liệu lưu trong sessionStorage hiện tại cũng bị xóa. Còn localStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt. Dữ liệu sẽ được lưu trữ không giới hạn thời gian.sessionStorage: giới hạn trong một cửa sổ hoăc thẻ của trình duyệt. Một trang web được mở trong hai thẻ của cùng một trình duyệt cũng không thể truy xuất dữ liệu lẫn nhau. Như vậy, khi bạn đóng trang web thì dữ liệu lưu trong sessionStorage hiện tại cũng bị xóa. Còn localStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt. Dữ liệu sẽ được lưu trữ không giới hạn thời gian.