localStorage trong Javascript [JAVASCRIPT]


Hôm nay ta sẽ học về cách lưu data dùng localStorage. localStorage lưu dữ liệu ở dạng key/value. Ví dụ ta muốn lưu name có giá trị lá Mr D.

Để set data ta dùng.

localStorage.setItem('name','Mr D');

Để lấy data ra ta dùng.

localStorage.getItem('name');

Để xoá data ta dùng.

localStorage.removeItem('name');

localStorage.removeItem('name') chỉ xoá key là name. Còn nếu muốn xoá tất cả ta dùng.

localStorage.clear();

Ta sẽ lưu trữ dữ liệu nhập từ input vào localStorage và lấy ra dữ liệu từ localStorage.

Đầu tiên ta tạo 1 form

<form action='#' id='form' >
  <input type='text' id='input' name='name' />
  <button type='submit' >Submit</button>
</form>

Sau đó ta add sự kiện vào form.

<script>
 var form = document.getElementById('form');
 var input = document.getElementById('input');
 form.addEventListener('submit', runCode);

 function runCode(e){
   e.preventDefault();
   let myInput = input.value;
   let data;

   if (localStorage.getItem('data') == null){
        data = [];
   }else {
       data = JSON.parse(localStorage.getItem('data'));
   }
   data.push(myInput);
   localStorage.setItem('data', JSON.stringify(data));
   alert('save');

   const getData = JSON.parse(localStorage.getItem('data'));
   getData.forEach(function(item){
     console.log(item);
   });
 }

</script>

Ta lưu dữ liệu kiểu JSON có key là 'data'. Dữ liệu ta lưu có dạng

data: ['hello','abc']

'data' là key, ['hello','abc'] là value. Khi ta lưu dữ liệu mới vào 'data' thì ta phải lấy ra toàn bộ lữu liệu của 'data'. Sau đó thêm vào ở cuối. ví dụ ta thêm vào '2020'. Thì ta sẽ có

data: ['hello','abc','2020']

Đoạn code lấy ra tất cả dữ liệu của key 'data'


   let data;

   if (localStorage.getItem('data') == null){
        data = [];
   }else {
       data = JSON.parse(localStorage.getItem('data'));
   }

Đầu tiên kiểm tra key 'data' có value hay không? nếu chưa có thì tạo array data là rỗng. nếu có rồi (else) thì sẽ lấy lên và chuyển dữ liệu đang lưu trong localStorage từ string sang JSON (JSON.parse). Sau đó sẽ thêm giá trị của input vào cuối array này

data.push(myInput);

Cuối cùng ta lưu lại vào localStorage, trước khi lưu thì chuyển JSON object sang JSON string (JSON.stringify).

   localStorage.setItem('data', JSON.stringify(data));

Khi lấy dữ liệu ra thì dữ liệu có dạng

const getData = JSON.parse(localStorage.getItem('data'));
// ['hello','abc','2020']

Để in ra các phẩn tử của mãng này ta dùng loop.

   getData.forEach(function(item){
     console.log(item);
   });

Lưu ý là ta mở developer tool (Firefox nhấn F12), để xem console.log trong mục console. Hoặc xem localStorage ở mục Application -> LocalStorage.Nếu muốn xoá localStorage ta chỉ việc chọn mục localStorage click chuột phải chọn clear.

Như vậy ta đã biết cách sử dụng localStorage trong javascript rồi đấy.