API lưu trữ web cung cấp các cơ chế theo đó các trình duyệt có thể lưu trữ các cặp khóa / giá trị một cách an toàn, theo cách trực quan hơn nhiều so với sử dụng cookie. Các API lưu trữ Web mở rộng Windowđối tượng với hai thuộc tính mới - Window.sessionStoragevà Window.localStorage. - việc gọi một trong số này sẽ tạo một thể hiện của đối tượng Storage, thông qua đó các mục dữ liệu có thể được đặt, truy xuất và xóa. Một đối tượng lưu trữ khác nhau được sử dụng cho sessionStoragevà localStoragecho mỗi nguồn gốc (tên miền).
Các đối tượng lưu trữ là các kho lưu trữ khóa-giá trị đơn giản , tương tự như các đối tượng, nhưng chúng vẫn nguyên vẹn thông qua tải trang .
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
Các khóa và các giá trị luôn là các chuỗi . Để lưu trữ bất kỳ loạiconvert it to Stringvà sau đó lưu trữ nó. Chúng tôi luôn khuyến nghị sử dụngStorage interfacecác phương pháp.
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));
Hai cơ chế trong Lưu trữ web như sau:
- sessionStorage duy trì một vùng lưu trữ riêng cho từng nguồn gốc nhất định Chính sách nguồn gốc tương tự có sẵn trong suốt thời gian của phiên trang (miễn là trình duyệt được mở, bao gồm tải lại và khôi phục trang).
- localStorage cũng làm điều tương tự, nhưng vẫn tồn tại ngay cả khi trình duyệt được đóng và mở lại.
Lưu trữ « Lưu trữ cục bộ ghi dữ liệu vào đĩa, trong khi lưu trữ phiên chỉ ghi dữ liệu vào bộ nhớ. Bất kỳ dữ liệu nào được ghi vào bộ lưu trữ phiên sẽ bị xóa khi ứng dụng của bạn thoát.
Dung lượng lưu trữ tối đa khả dụng là khác nhau trên mỗi trình duyệt , nhưng hầu hết các trình duyệt đã triển khai ít nhất giới hạn lưu trữ tối đa được đề xuất của w3c là 5MB .
+----------------+--------+---------+-----------+--------+
| | Chrome | Firefox | Safari | IE |
+----------------+--------+---------+-----------+--------+
| LocalStorage | 10MB | 10MB | 5MB | 10MB |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB | 10MB | Unlimited | 10MB |
+----------------+--------+---------+-----------+--------+
Luôn luôn bắt lỗi bảo mật và hạn ngạch của LocalStorage
StorageEvent «Sự kiện lưu trữ được kích hoạt trên đối tượng Window của tài liệu khi vùng lưu trữ thay đổi. Khi một tác nhân người dùng gửi thông báo lưu trữ cho Tài liệu, tác nhân người dùng phải xếp hàng một tác vụ để thực hiện một sự kiện có tên lưu trữ tại đối tượng Window của đối tượng Tài liệu, sử dụng StorageEvent.
Lưu ý: Để biết ví dụ trong thế giới thực, hãy xem Trình diễn lưu trữ web . kiểm tra mã nguồn
Nghe sự kiện lưu trữ trên dom / Window để nắm bắt những thay đổi trong bộ lưu trữ. bí ẩn .
Cookie (cookie web, cookie trình duyệt) Cookie là dữ liệu, được lưu trữ trong các tệp văn bản nhỏ dưới dạng cặp giá trị tên, trên máy tính của bạn.
Truy cập JavaScript bằng Document.cookie
Các cookie mới cũng có thể được tạo thông qua JavaScript bằng thuộc tính Document.cookie và nếu cờ httpOnly không được đặt, các cookie hiện tại cũng có thể được truy cập từ JavaScript.
document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"
Cookie an toàn và httpOnly Cơ chế quản lý nhà nước HTTP
Cookies thường được sử dụng trong ứng dụng web để xác định người dùng và phiên xác thực của họ
Khi nhận được yêu cầu HTTP, máy chủ có thể gửi tiêu đề Set-Cookie kèm theo phản hồi. Cookie thường được trình duyệt lưu trữ và sau đó cookie được gửi với các yêu cầu được gửi đến cùng một máy chủ bên trong tiêu đề Cookie HTTP.
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Cookie phiên sẽ được gỡ bỏ khi máy khách bị tắt. Họ không chỉ định các Chỉ thị hết hạn hoặc Tuổi tối đa.
Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/
Cookie vĩnh viễn hết hạn vào một ngày cụ thể (Hết hạn) hoặc sau một khoảng thời gian cụ thể (Tuổi tối đa).
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
Tiêu đề yêu cầu HTTP Cookie chứa cookie HTTP được lưu trữ trước đó được gửi bởi máy chủ với tiêu đề Set-Cookie. Các cookie chỉ HTTP không thể truy cập thông qua JavaScript thông qua thuộc tính Document.cookie, XMLHttpRequest và API yêu cầu để giảm thiểu các cuộc tấn công chống lại kịch bản chéo trang (XSS).
Cookies chủ yếu được sử dụng cho ba mục đích:
- Quản lý phiên «Đăng nhập, giỏ mua hàng, điểm trò chơi hoặc bất cứ điều gì khác mà máy chủ nên nhớ
- Cá nhân hóa «Tùy chọn người dùng, chủ đề và các cài đặt khác
- Theo dõi (Ghi lại và phân tích hành vi người dùng) «Cookies có một miền liên quan đến chúng. Nếu tên miền này giống với tên miền của trang bạn đang truy cập, cookie được gọi là cookie của bên thứ nhất. Nếu tên miền khác, nó được gọi là cookie của bên thứ ba. Mặc dù cookie của bên thứ nhất chỉ được gửi đến máy chủ cài đặt chúng, một trang web có thể chứa hình ảnh hoặc các thành phần khác được lưu trữ trên máy chủ trong các tên miền khác (như biểu ngữ quảng cáo). Cookie được gửi qua các thành phần của bên thứ ba này được gọi là cookie của bên thứ ba và chủ yếu được sử dụng để quảng cáo và theo dõi trên web.
Cookies được phát minh để giải quyết vấn đề "làm thế nào để nhớ thông tin về người dùng":
- Khi người dùng truy cập một trang web, tên của anh ta có thể được lưu trữ trong một cookie.
- Lần tới khi người dùng truy cập trang, cookie thuộc về trang sẽ được thêm vào yêu cầu. Bằng cách này, máy chủ sẽ lấy dữ liệu cần thiết để "ghi nhớ" thông tin về người dùng.
Ví dụ về GitHubGist
Như tóm tắt,
- localStorage vẫn tồn tại trên các tab hoặc cửa sổ khác nhau và ngay cả khi chúng tôi đóng trình duyệt, theo chính sách bảo mật tên miền và lựa chọn của người dùng về giới hạn hạn ngạch.
- Đối tượng sessionStorage không tồn tại nếu chúng ta đóng tab (bối cảnh duyệt cấp cao nhất) vì nó không tồn tại nếu chúng ta lướt qua một tab hoặc cửa sổ khác.
- Lưu trữ web (phiên, cục bộ) cho phép chúng tôi lưu một số lượng lớn các cặp khóa / giá trị và rất nhiều văn bản, điều không thể thực hiện thông qua cookie.
- Cookies được sử dụng cho các hành động nhạy cảm chỉ nên có thời gian tồn tại ngắn.
- Cookies chủ yếu được sử dụng để quảng cáo và theo dõi trên web. Xem ví dụ về các loại cookie được sử dụng bởi Google .
- Cookies được gửi với mọi yêu cầu, vì vậy chúng có thể làm giảm hiệu suất (đặc biệt đối với các kết nối dữ liệu di động). API hiện đại để lưu trữ ứng dụng khách là API lưu trữ Web (localStorage và sessionStorage) và IndexedDB.
