网络存储
有两种类型的 Web 存储对象:
- sessionStorage 临时存储在客户端计算机上,当用户离开您的网站时会自动抹掉。
- localStorage 永久存储在客户端计算机上,以后用户再次访问您的网站时可以检索到它。
Cookie、会话存储和本地存储的客户端信息存储为键和值对。
- 无论服务器是否需要它们,Cookie 始终会发送到服务器。
- Web 存储数据仅以编程方式发送到服务器,即当开发人员决定服务器需要它时。
设置键/值对:
使用 setItem() 方法设置 Web 存储数据,例如,永久名称、电话号码和今天的咖啡订单:
if (typeof(Storage) !== 'undefined') {
localStorage.setItem('name','Alice Liddell');
localStorage.setItem('phone','0400 000 000');
sessionStorage.setItem('coffee','Latte');
} else {
// Sorry - you'll have to code using cookies!
}
获取键/值对:
使用 getItem() 方法检索 Web 存储数据,例如,永久名称、电话号码和今天的咖啡订单:
var name, phone, coffee;
if (typeof(Storage) !== 'undefined') {
name = localStorage.getItem('name');
phone = localStorage.getItem('phone');
coffee = sessionStorage.getItem('coffee');
} else {
// Sorry - you'll have to code using cookies!
}
删除 Web 存储数据:
使用 removeItem() 方法取消设置 Web 存储数据:
var name, phone, coffee;
if (typeof(Storage) !== 'undefined') {
localStorage.removeItem('name');
}
或重置所有数据:
localStorage.clear(); // just localStorage
sessionStorage.clear(); // just sessionStorage
Storage.clear(); // both!
Cookies
Cookie 是存储在客户端计算机上的小块信息,用于存储有关用户的信息。Cookie 是一个名称 - 值对,例如:
name = "John Doe"
默认情况下,当浏览器关闭时,cookie 会被删除,但也可以为它们提供设定的到期时间(持久性 cookie)。
Javascript一直能够在客户端的机器上设置cookie来记住每个特定用户的信息,但是HTML5看到了客户端存储的大小和安全性的升级,称为Web存储,并且是存储客户端信息的更好方式。
存储数据客户端
HTTP 是一种无状态协议。这意味着一旦客户端向服务器发送了请求,并且服务器通过发送请求的信息进行了响应,连接就会终止,服务器就会忘记有关客户端/用户的所有信息。
但是,维护交互式 Web 应用程序的状态可能至关重要。查看客户端存储,即存储在Web浏览器中的内容。
在 Chrome 中,查看开发者控制台并导航到应用。
预先存储
字段可以预先填充,例如在“Remember me”类型的应用程序中的情况下:
if (localStorage.remember == 'true') {
document.getElementById('name').value = localStorage.name;
document.getElementById('phone').value = localStorage.phone;
}
如果未选中该复选框,则用户可以被遗忘。
if (document.getElementById('remember').checked !== true) {
localStorage.removeItem('name');
localStorage.removeItem('phone');
}
// or localStorage.clear(); if not storing anything else in localStorage