LocalStorage, sessionStorage – javascript lấy bộ nhớ cục bộ

Bạn đang xem : javascript lấy bộ nhớ cục bộ

Các đối tượng lưu trữ web localStorage sessionStorage cho phép lưu khóa / value trong trình duyệt.

Điều thú vị về chúng là dữ liệu vẫn tồn tại sau khi làm mới trang (đối với sessionStorage ) và thậm chí khi khởi động lại toàn bộ trình duyệt (đối với localStorage ). Chúng tôi sẽ sớm thấy điều đó.

Chúng tôi đã có cookie. Tại sao phải bổ sung các đối tượng?

  • Không giống như cookie, các đối tượng lưu trữ web không được gửi đến máy chủ với mỗi yêu cầu. Do đó, chúng tôi có thể lưu trữ nhiều hơn nữa. Hầu hết các trình duyệt hiện đại đều cho phép ít nhất 5 megabyte dữ liệu (hoặc hơn) và có các tùy chọn cài đặt để định cấu hình.
  • Cũng không giống như cookie, máy chủ không thể thao tác các đối tượng lưu trữ thông qua tiêu đề HTTP. Mọi thứ đều được thực hiện bằng JavaScript.
  • Bộ nhớ được ràng buộc với nguồn gốc (bộ ba miền / giao thức / cổng). Nghĩa là, các giao thức hoặc miền phụ khác nhau suy ra các đối tượng lưu trữ khác nhau, chúng không thể truy cập dữ liệu của nhau.

Cả hai đối tượng lưu trữ đều cung cấp các phương thức và thuộc tính giống nhau:

  • setItem (key, value) – lưu trữ cặp khóa / giá trị.
  • getItem (key) – lấy giá trị bằng khóa.
  • removeItem (key) – xóa khóa cùng với giá trị của nó.
  • clear () – xóa mọi thứ.
  • key (index) – lấy khoá ở một vị trí nhất định.
  • length – số lượng các mục được lưu trữ.

Như bạn có thể thấy, nó giống như một bộ sưu tập Bản đồ ( setItem / getItem / removeItem ), nhưng cũng cho phép truy cập bằng chỉ mục với key (index) < / code>.

Hãy xem nó hoạt động như thế nào.

Các tính năng chính của localStorage là:

  • Được chia sẻ giữa tất cả các tab và cửa sổ từ cùng một nguồn.
  • Dữ liệu không hết hạn. Nó vẫn còn sau khi trình duyệt khởi động lại và thậm chí khởi động lại hệ điều hành.

Ví dụ: nếu bạn chạy mã này…

… Và đóng / mở trình duyệt hoặc chỉ mở cùng một trang trong một cửa sổ khác, sau đó bạn có thể nhận được nó như sau:


  alert (localStorage.getItem ('test')); // 1  

Chúng tôi chỉ phải ở cùng một nguồn gốc (miền / cổng / giao thức), đường dẫn url có thể khác nhau.

localStorage được chia sẻ giữa tất cả các cửa sổ có cùng nguồn gốc, vì vậy nếu chúng tôi đặt dữ liệu trong một cửa sổ, thay đổi sẽ hiển thị trong một cửa sổ khác.

Chúng tôi cũng có thể sử dụng một cách đối tượng đơn giản để lấy / đặt khóa, như sau:


  // khóa thiết lập
localStorage.test = 2;

// lấy chìa khóa
cảnh báo (localStorage.test); // 2

// xóa khóa
xóa localStorage.test;  

Điều đó được cho phép vì lý do lịch sử và hầu hết đều hoạt động, nhưng thường không được khuyến nghị vì:

  1. Nếu khóa do người dùng tạo, nó có thể là bất kỳ thứ gì, chẳng hạn như length hoặc toString hoặc một phương thức tích hợp khác của localStorage . Trong trường hợp đó, getItem / setItem hoạt động tốt, trong khi quyền truy cập dạng đối tượng không thành công:


      let key = 'length';
    localStorage [key] = 5; // Lỗi, không thể chỉ định độ dài  
  2. Có một sự kiện lưu trữ , sự kiện này sẽ kích hoạt khi chúng tôi sửa đổi dữ liệu. Sự kiện đó không xảy ra đối với quyền truy cập dạng đối tượng. Chúng ta sẽ thấy điều đó ở phần sau của chương này.

Như chúng ta đã thấy, các phương pháp này cung cấp chức năng “lấy / đặt / xóa bằng khóa”. Nhưng làm thế nào để nhận tất cả các giá trị hoặc khóa đã lưu?

Rất tiếc, các đối tượng lưu trữ không thể lặp lại.

Một cách là lặp lại chúng dưới dạng một mảng:


  for (let i = 0; i & lt; localStorage.length; i ++) {
  let key = localStorage.key (i);
  alert (`$ {key}: $ {localStorage.getItem (key)}`);
}  

Một cách khác là sử dụng vòng lặp for key trong localStorage , giống như cách chúng ta làm với các đối tượng thông thường.

Nó lặp lại các khóa, nhưng cũng xuất ra một số trường tích hợp mà chúng tôi không cần:


  // không thử
for (let key trong localStorage) {
  alert (phím); // hiển thị getItem, setItem và những thứ tích hợp sẵn khác
}  

… Vì vậy, chúng tôi cần lọc các trường từ nguyên mẫu bằng kiểm tra hasOwnProperty :


  for (let key in localStorage) {
  if (! localStorage.hasOwnProperty (key)) {
    tiếp tục; // bỏ qua các phím như "setItem", "getItem", v.v.
  }
  alert (`$ {key}: $ {localStorage.getItem (key)}`);
}  

… Hoặc chỉ cần lấy các khóa “riêng” bằng Object.keys và sau đó lặp lại chúng nếu cần:


  let key = Object.keys (localStorage);
for (chìa khóa của các phím) {
  alert (`$ {key}: $ {localStorage.getItem (key)}`);
}  

Cái sau hoạt động vì Object.keys chỉ trả về các khóa thuộc về đối tượng, bỏ qua nguyên mẫu.

Xin lưu ý rằng cả khóa và giá trị đều phải là chuỗi.

Nếu là bất kỳ loại nào khác, chẳng hạn như một số hoặc một đối tượng, nó sẽ tự động được chuyển đổi thành chuỗi:

Tuy nhiên, chúng tôi có thể sử dụng JSON để lưu trữ các đối tượng:


  localStorage.user = JSON.stringify ({name: "John"});

// một lúc sau
let user = JSON.parse (localStorage.user);
cảnh báo (user.name); // John  

Ngoài ra, có thể xâu chuỗi toàn bộ đối tượng lưu trữ, ví dụ: cho mục đích gỡ lỗi:


  // đã thêm các tùy chọn định dạng vào JSON.stringify để làm cho đối tượng trông đẹp hơn
alert (JSON.stringify (localStorage, null, 2));  

Đối tượng sessionStorage được sử dụng ít thường xuyên hơn localStorage .

Thuộc tính và phương thức giống nhau, nhưng có nhiều hạn chế hơn:

  • sessionStorage chỉ tồn tại trong tab trình duyệt hiện tại.
    • Một tab khác có cùng trang sẽ có bộ nhớ khác.
    • Nhưng nó được chia sẻ giữa các iframe trong cùng một tab (giả sử chúng có cùng nguồn gốc).
  • Dữ liệu vẫn tồn tại khi làm mới trang, nhưng không đóng / mở tab.

Hãy xem điều đó hoạt động.

Chạy mã này…

… Sau đó, làm mới trang. Bây giờ bạn vẫn có thể lấy dữ liệu:


  alert (sessionStorage.getItem ('test')); // sau khi làm mới: 1  

… Nhưng nếu bạn mở cùng một trang trong một tab khác và thử lại ở đó, đoạn mã trên trả về null , nghĩa là “không tìm thấy gì”.

Đó chính xác là vì sessionStorage không chỉ bị ràng buộc với nguồn gốc mà còn với tab của trình duyệt. Vì lý do đó, sessionStorage được sử dụng ít.

Khi dữ liệu được cập nhật trong trình kích hoạt sự kiện localStorage hoặc sessionStorage , lưu trữ , với các thuộc tính:

  • key - khóa đã được thay đổi ( null nếu .clear () được gọi).
  • oldValue - giá trị cũ ( null nếu khóa mới được thêm vào).
  • newValue - giá trị mới ( null nếu khóa bị xóa).
  • url - url của tài liệu nơi quá trình cập nhật diễn ra.
  • storageArea - đối tượng localStorage hoặc sessionStorage nơi quá trình cập nhật diễn ra.

Điều quan trọng là: sự kiện kích hoạt trên tất cả các đối tượng window mà bộ nhớ có thể truy cập được, ngoại trừ đối tượng đã gây ra sự kiện đó.

Hãy nói rõ hơn.

Hãy tưởng tượng, bạn có hai cửa sổ với cùng một trang web trong mỗi cửa sổ. Vì vậy, localStorage được chia sẻ giữa chúng.

Bạn có thể muốn mở trang này trong hai cửa sổ trình duyệt để kiểm tra mã bên dưới.

Nếu cả hai cửa sổ đang lắng nghe window.onstorage , thì mỗi cửa sổ sẽ phản ứng với các cập nhật đã xảy ra trong cửa sổ kia.


  // kích hoạt các bản cập nhật được thực hiện cho cùng một bộ nhớ từ các tài liệu khác
window.onstorage = event = & gt; {// cũng có thể sử dụng window.addEventListener ('storage', event = & gt; {
  if (event.key! = 'now') return;
  alert (event.key + ':' + event.newValue + "at" + event.url);
};

localStorage.setItem ('now', Date.now ());  

Xin lưu ý rằng sự kiện cũng chứa: event.url - url của tài liệu nơi dữ liệu được cập nhật.

Ngoài ra, event.storageArea chứa đối tượng lưu trữ - sự kiện này giống nhau đối với cả sessionStorage localStorage , do đó, event .storageArea tham chiếu đến tệp đã được sửa đổi. Chúng tôi thậm chí có thể muốn đặt lại một thứ gì đó trong đó, để “phản hồi” với một sự thay đổi.

Điều đó cho phép các cửa sổ khác nhau có cùng nguồn gốc trao đổi tin nhắn.

Các trình duyệt hiện đại cũng hỗ trợ API kênh quảng bá , API đặc biệt dành cho giao tiếp giữa các cửa sổ có cùng nguồn gốc, tính năng đầy đủ hơn nhưng ít được hỗ trợ hơn. Có những thư viện tổng hợp API đó, dựa trên localStorage , làm cho nó khả dụng ở mọi nơi.

Các đối tượng lưu trữ web localStorage sessionStorage cho phép lưu trữ khóa / giá trị trong trình duyệt.

  • Cả key value đều phải là chuỗi.
  • Giới hạn là 5mb +, tùy thuộc vào trình duyệt.
  • Chúng không hết hạn.
  • Dữ liệu được ràng buộc với nguồn gốc (miền / cổng / giao thức).

localStorage
sessionStorage

Được chia sẻ giữa tất cả các tab và cửa sổ có cùng nguồn gốc
Hiển thị trong tab trình duyệt, bao gồm iframe từ cùng nguồn gốc

Sống sót khi khởi động lại trình duyệt
Làm mới trang sống sót (nhưng không đóng tab)

API:

  • setItem (key, value) - lưu trữ cặp khóa / giá trị.
  • getItem (key) - lấy giá trị bằng khóa.
  • removeItem (key) - xóa khóa cùng với giá trị của nó.
  • clear () - xóa mọi thứ.
  • key (index) - lấy số key index .
  • length - số lượng các mục được lưu trữ.
  • Sử dụng Object.keys để lấy tất cả các khóa.
  • Chúng tôi truy cập các khóa dưới dạng thuộc tính đối tượng, trong trường hợp đó, sự kiện storage không được kích hoạt.

Sự kiện lưu trữ:

  • Kích hoạt trên các lệnh gọi setItem , removeItem , clear .
  • Chứa tất cả dữ liệu về hoạt động ( key / oldValue / newValue ), tài liệu url và đối tượng lưu trữ storageArea .
  • Kích hoạt trên tất cả các đối tượng window có quyền truy cập vào bộ nhớ ngoại trừ đối tượng đã tạo ra nó (trong tab cho sessionStorage , trên toàn cầu cho localStorage ).


Xem thêm những thông tin liên quan đến chủ đề javascript lấy bộ nhớ cục bộ

How to Build a Kanban Board with JavaScript (No Frameworks)

  • Tác giả: dcode
  • Ngày đăng: 2021-09-20
  • Đánh giá: 4 ⭐ ( 5283 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link to CODE:
    https://github.com/dcode-youtube/kanban-board

    In today's video we'll be building a Kanban Board from scratch using HTML, CSS and JavaScript. This doesn't require any external frameworks or libraries such as React, Vue, jQuery etc.

    JavaScript/CSS APIs and features covered in this video include:
    - Import/Export Syntax with Modules
    - Arrow Functions
    - Template Strings
    - Class List
    - Block Element Modifier
    - Local Storage

    Chapters:
    0:00 Intro & Overview
    3:46 HTML
    7:22 CSS
    13:40 API & Local Storage Access
    38:00 User Interface
    1:04:24 Drag and Drop
    1:25:05 Outro

    🏫 My Udemy Courses - https://www.udemy.com/user/domenic-corso/
    🎨 Download my VS Code theme - https://marketplace.visualstudio.com/items?itemName=dcode.dcode-theme
    💜 Join my Discord Server - https://discord.gg/TXMQyvbpcA
    🐦 Find me on Twitter - https://twitter.com/dcodeyt
    💸 Support me on Patreon - https://www.patreon.com/dcode
    📰 Follow me on DEV Community - https://dev.to/dcodeyt
    📹 Join this channel to get access to perks - https://www.youtube.com/channel/UCjX0FtIZBBVD3YoCcxnDC4g/join

    If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

    dcode javascript

[Tự học Javascript] Dọn dẹp tài nguyên, Quản lý bộ nhớ trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 8006 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Quản lý bộ nhớ trong JavaScript được thực hiện tự động và vô hình đối với chúng ta. Chúng ta tạo ra các biến nguyên thủy, các đối tượng, các hàm Tất cả những gì cần bộ nhớ.

js-excution-context

  • Tác giả: freesoft.dev
  • Đánh giá: 5 ⭐ ( 3569 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Học Javascript: Biến toàn cục và biến cục bộ trong Javascript

  • Tác giả: hoangluyen.com
  • Đánh giá: 3 ⭐ ( 7528 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này bạn sẽ tìm hiểu về biến toàn cục và biến cục bộ trong Javascript, cách sử dụng nó với những ví dụ dễ hiểu nhất.

Biến toàn cục và biến cục bộ trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 4830 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biến toàn cục và biến cục bộ trong JS, qua đó sẽ giúp bạn hiểu được phạm vi hoạt động của một biến toàn cục và cục bộ trong JS đơn giản nhất

Biến cục bộ và biến toàn cục

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 5 ⭐ ( 4972 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biến cục bộ, biến toàn cục hay biến tĩnh (biến static) là các loại biến có phạm vi sử dụng khác nhau trong ngôn ngữ lập trình C/C++.

Biến toàn cục và biến cục bộ trong Javascript

  • Tác giả: truyenmai.com
  • Đánh giá: 5 ⭐ ( 2129 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Truyền Mai – Biến toàn cục và biến cục bộ trong Javascript – %

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  ArrayList trong Java - danh sách mảng trong java