Nhận giá trị lưu trữ phiên trong JavaScript

Bất cứ ai làm việc với web đều cần lưu trữ dữ liệu để sử dụng sau. Các nhà phát triển phụ trợ có một số cơ sở dữ liệu mạnh mẽ trong bộ công cụ của họ. Nhưng nếu bạn là nhà phát triển giao diện người dùng, bạn vẫn có thể lưu trữ và xử lý dữ liệu bằng bộ lưu trữ trên web

Trong bài viết này, bạn sẽ tìm hiểu kho lưu trữ web là gì, các loại lưu trữ web khác nhau và thời điểm sử dụng từng loại

Lưu trữ web là gì?

Lưu trữ web là một tính năng HTML5 cho phép bạn lưu trữ dữ liệu theo các cặp giá trị chính trong trình duyệt. Điều này cho phép các ứng dụng lưu trữ dữ liệu ở phía máy khách để bạn có thể truy cập hoặc thao tác với nó sau này. Tất cả dữ liệu được lưu trữ trong bộ lưu trữ web sẽ nằm trong trình duyệt và không được chuyển đi bất kỳ nơi nào khác

Các loại lưu trữ web

Hai loại lưu trữ web chính là‌‌ lưu trữ cục bộ‌‌ và lưu trữ phiên‌‌. Mỗi người có những đặc điểm riêng

Nhưng có một điểm chung là chúng lưu trữ dữ liệu trong trình duyệt cụ thể mà người dùng sử dụng để truy cập trang web. Bạn sẽ không thể truy cập cùng một dữ liệu thông qua một trình duyệt khác

Bây giờ hãy thảo luận chi tiết về cả hai

Lưu trữ cục bộ

Bộ nhớ cục bộ có thể lưu trữ 5 MB dữ liệu cho mỗi ứng dụng trong suốt thời gian tồn tại của ứng dụng. Đóng trình duyệt sẽ không ảnh hưởng đến dữ liệu theo bất kỳ cách nào – nó vẫn ở đó trừ khi bạn xóa nó

Bạn chỉ có thể truy cập đối tượng lưu trữ cục bộ thông qua localStorage. Các phương thức bạn có thể sử dụng để thực hiện các thao tác trên đối tượng localStorage là

localStorage // to access the localStorage object 
localStorage.setItem['name', 'John'] // sets name equal to john localStorage.getItem['name'] // "John" 
localStorage.removeItem['name'] // removes name from the localStorage localStorage.clear[] // clears the localStorage

localStorage.setItem[] lấy một khóa và giá trị làm tham số và đặt một mục mới trong đối tượng lưu trữ cục bộ bằng với cặp giá trị khóa đã cho

localStorage.getItem[] lấy một khóa làm tham số và trả về giá trị được lưu trữ cho khóa đó trong bộ lưu trữ

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify[scores] 
localStorage.setItem['scores', scoresJSON] 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

0 xóa toàn bộ đối tượng localStorage

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify[scores] 
localStorage.setItem['scores', scoresJSON] 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

1 nhận một khóa làm tham số và xóa cặp khóa-giá trị tương ứng. ‌‌

Bất kỳ mục nào bạn lưu trữ trong localStorage sẽ được lưu trữ dưới dạng chuỗi. Điều này có nghĩa là bạn cần chuyển đổi các kiểu dữ liệu khác như mảng hoặc đối tượng thành chuỗi – nếu không bạn sẽ mất cấu trúc của chúng

Xem ví dụ bên dưới.      

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify[scores] 
localStorage.setItem['scores', scoresJSON] 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

Trong ví dụ trên, đầu tiên chúng ta tạo một mảng điểm số, sau đó chuyển đổi nó thành một chuỗi bằng cách sử dụng JSON. stringify[] và cuối cùng đã lưu mảng điểm được xâu chuỗi trong localStorage

Dành thời gian của bạn để xem kết quả tôi nhận được khi chạy đoạn mã tương tự trong bảng điều khiển trình duyệt của mình

Mã ví dụ trong bảng điều khiển trình duyệt

Lưu ý rằng các điểm số chính có giá trị bằng với mảng điểm số được xâu chuỗi của chúng tôi. Nhưng nếu chúng ta không chuyển đổi mảng điểm thành một chuỗi, thì mảng của chúng ta sẽ mất cấu trúc và các mục sẽ được lưu dưới dạng một chuỗi như bên dưới

const scores = [10, 8, 6, 3, 9] 
localStorage.setItem['scores', scores] 
localStorage // output >> {scores: '10, 8, 6, 3, 9', length: 1}

Chúng ta cũng hãy chạy mã trong bảng điều khiển trình duyệt để xem nhật ký của bảng điều khiển là gì

Lưu một mảng mà không chuyển đổi nó thành một chuỗi

Xem cách mảng điểm số của chúng tôi được chuyển đổi thành một chuỗi khi chúng tôi không chuyển đổi nó thành một chuỗi bằng JSON. xâu chuỗi[]?

Lưu trữ phiên

Lưu trữ phiên cho phép bạn lưu trữ dữ liệu trong trình duyệt tùy thuộc vào bộ nhớ hệ thống và dữ liệu được lưu trữ trong trình duyệt cho đến khi đóng trình duyệt. Nói cách khác, đóng trình duyệt sẽ xóa tất cả dữ liệu được lưu trữ trong bộ lưu trữ phiên

Giống như localStorage, bạn có thể truy cập bộ nhớ phiên bằng cách nhập sessionStorage trong bảng điều khiển trình duyệt

sessionStorage // access the session storage 
sessionStorage.setItem['name', 'John'] // add name to session storage with value john 
sessionStorage.getItem['name'] // get the name item from session storage sessionStorage.removeItem['name'] // remove name item from the session storage sessionStorage.clear[] // clear the session storage

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify[scores] 
localStorage.setItem['scores', scoresJSON] 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

2 lấy một khóa và giá trị làm tham số và đặt một mục mới trong đối tượng lưu trữ cục bộ bằng với cặp giá trị khóa đã cho

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify[scores] 
localStorage.setItem['scores', scoresJSON] 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

0 lấy khóa làm tham số và trả về giá trị được lưu trữ cho khóa đó trong bộ lưu trữ

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify[scores] 
localStorage.setItem['scores', scoresJSON] 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

1 lấy một khóa làm tham số và xóa cặp khóa-giá trị tương ứng

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify[scores] 
localStorage.setItem['scores', scoresJSON] 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

2 xóa toàn bộ đối tượng localStorage. ‌‌

Giống như localStorage, bất kỳ mục nào được lưu trữ trong sessionStorage sẽ được lưu trữ dưới dạng chuỗi. Điều này có nghĩa là chúng ta cần chuyển đổi chúng thành chuỗi trước khi lưu trữ trong sessionStorage

Trường hợp sử dụng ví dụ lưu trữ web

Bạn có thể sử dụng bộ nhớ cục bộ khi bạn muốn dữ liệu của mình khả dụng khi người dùng truy cập lại trang web, chẳng hạn như đối với giỏ hàng hoặc điểm trò chơi/câu đố. Chỉ cần lưu ý rằng thông tin được lưu trong bộ nhớ cục bộ không được nhạy cảm. ‌‌

Bạn có thể sử dụng lưu trữ phiên khi dữ liệu cần lưu là nhạy cảm. Xác thực người dùng là một ví dụ về dữ liệu mà bạn muốn xóa ngay khi người dùng đóng tab

Phần kết luận

Trong bài viết này, bạn đã học được những cách hiện đại để lưu trữ dữ liệu tạm thời trong trình duyệt. Tôi hy vọng điều này đã giúp bạn hiểu cách thức và thời điểm sử dụng cả hai loại lưu trữ web trong dự án của mình

Quan tâm đến việc kết nối trên LinkedIn?

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Tooba Jamal

Một nhà phát triển phần mềm có sở trường viết kỹ thuật. Hiện tại, tôi đang làm việc với JavaScript, React và Redux

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Lưu trữ phiên trong JavaScript là gì?

Làm cách nào để lấy giá trị mảng lưu trữ cục bộ trong JavaScript?

Làm thế nào các giá trị được lưu trữ trong phiên?

Làm cách nào để lấy khóa lưu trữ cục bộ trong JavaScript?