Hướng dẫn php local storage - lưu trữ cục bộ php

Api LocalStorage cho phép web dev lưu dữ liệu dưới dạng key-value trên máy của user. Việc lưu dữ liệu như vậy sẽ giúp cải thiện performance khi mà số lượng request database phía server được giảm đi, từ đó giảm chi phí hạ tầng server.LocalStorage cho phép web dev lưu dữ liệu dưới dạng key-value trên máy của user. Việc lưu dữ liệu như vậy sẽ giúp cải thiện performance khi mà số lượng request database phía server được giảm đi, từ đó giảm chi phí hạ tầng server.

Trước khi có sự ra đời của LocalStorage, các dev khi muốn lưu dữ liệu trên client thường cần đến cookies của trình duyệt. Cách làm này có một số nhược điểm, cụ thể như cookie chỉ có thể lưu tối đa 4,096 bytes dữ liệu và cookie luôn được gửi đến server khi client gửi request dẫn đến tăng kích thước của request, lượng băng thông sử dụng cao, thời gian request lâu hơn.LocalStorage, các dev khi muốn lưu dữ liệu trên client thường cần đến cookies của trình duyệt. Cách làm này có một số nhược điểm, cụ thể như cookie chỉ có thể lưu tối đa 4,096 bytes dữ liệu và cookie luôn được gửi đến server khi client gửi request dẫn đến tăng kích thước của request, lượng băng thông sử dụng cao, thời gian request lâu hơn.

Trong bài viết này, chúng ta sẽ cũng tìm hiểu về việc ứng dụng LocalStorage trong việc lưu dữ liệu của web app.LocalStorage trong việc lưu dữ liệu của web app.

1. Kiểm tra xem trình duyệt có hỗ trợ LocalStorage hay không

Việc đầu tiên là kiểm tra xem liệu trình duyệt web mục tiêu có hỗ trợ LocalStorage hay không, nếu không, ta cần cung cấp fallbacks.Đoạn code bên dưới giúp chúng ta xác định điều nàycó hỗ trợ LocalStorage hay không, nếu không, ta cần cung cấp fallbacks.
Đoạn code bên dưới giúp chúng ta xác định điều này

if [localStorage] {
  // LocalStorage is supported
} else {
  // No support. Fallback here!
}

Trường hợp trình duyệt không hỗ trợ LocalStorage bạn có thể lưu dữ liệu bằng cookie hoặc gửi dữ liệu đó lên server và lưu tại server.LocalStorage bạn có thể lưu dữ liệu bằng cookie hoặc gửi dữ liệu đó lên server và lưu tại server.

2. Lưu dữ liệu vào datastore

Để lưu dữ liệu, ta dùng hàm setItem[] với 2 parameter key và value.

localStorage.setItem ['name', 'Bepatient'];

Bây giờ chúng ta thử dùng localStorage để lưu thông tin mà người dùng nhập vào form trong ví dụ dưới đây.localStorage để lưu thông tin mà người dùng nhập vào form trong ví dụ dưới đây.

  

    Name
    
  
  

    Email
    
  
  

    Message
    
  
  

    
  

Chúng ta có thể listent event form submit và lưu tên người dùng vào datastore.

window.onload = function[] {
    if [localStorage] {
      document.getElementById['contactForm'].addEventListener['submit', function[] {
          var name = document.getElementById['name'].value;
          localStorage.setItem['name', name];
      }];
    }
}

3. Lấy dữ liệu ra từ datastore

Để lấy dữ liệu ta dùng hàm getItem[] với parameter duy nhất là key dùng khi lưu dữ liệu đó.

var name = localStorage.getItem['name'];

Ví dụ dưới đây lấy tên user từ datastore và hiển thị lên webpage.

window.onload = function[] {
  ...
  // Retrieve user name
  var name = localStorage.getItem['name'];
  if [name != "undefined" && name != "null"] {
    document.getElementById['welcomeMessage'].innerHTML = "Hello " + name + "!";
  } else {
    document.getElementById['welcomeMessage'].innerHTML = "Hello!";
  }  
}

4. Xóa dữ liệu khỏi datastore

Để xóa dữ liệu ta dùng hàm removeItem[] với parameter duy nhất là key dùng khi lưu dữ liệu đó.

localStorage.removeItem['name'];

Để xóa toàn bộ dữ liệu đã lưu ta dùng hàm clear[]

localStorage.clear[];

5. Lấy ra key

Để lấy ra key của dữ liệu trong datastore ta dùng hàm key[] với parameter là index của dữ liệu đó trong datastore.Ví dụ sau in ra toàn bộ key, value của item được lưu trong datastore:
Ví dụ sau in ra toàn bộ key, value của item được lưu trong datastore:

var i = 0;
for [i; i