1. Cookie
定义与用途:
- Cookie 是一小段存储在客户端(浏览器)的数据,每次HTTP请求时,浏览器会自动将Cookie附加到请求头中发送给服务器。
- 它主要用于会话状态管理(如用户登录状态、购物车信息)、个性化设置(如用户自定义设置、主题等)以及浏览器行为跟踪(如分析用户行为)。
特点:
- 兼容性好:几乎所有浏览器都支持Cookie。
- 容量有限:每个Cookie的大小通常限制在4KB左右,并且每个域名下的Cookie数量也有限制(一般为20个)。
- 自动发送:每次HTTP请求都会自动携带Cookie,这可能会增加网络开销。
- 安全性问题:存储在客户端,数据容易被篡改,且存在CSRF(跨站请求伪造)等安全风险。
2. localStorage
定义与用途:
- localStorage 是HTML5提供的一种Web存储API,允许网站在用户的浏览器中存储数据,且没有过期时间(除非手动删除)。
- 它主要用于持久化存储用户数据,如用户偏好设置、游戏进度等。
特点:
- 操作方便:以键值对的形式存储数据,API简单易用。
- 容量较大:相比Cookie,localStorage的容量要大得多,一般为5MB左右。
- 持久性:数据存储在浏览器中,不会随会话结束而清除,除非用户手动清除或浏览器数据被删除。
- 同源策略:localStorage的数据只能在同一个源(协议+域名+端口)下共享。
3. sessionStorage
定义与用途:
- sessionStorage 与localStorage类似,也是HTML5提供的一种Web存储API,但它仅在当前会话(浏览器标签页)中有效。
- 它主要用于存储与当前会话相关的数据,如页面加载次数、表单数据等。
特点:
- 会话级别:数据仅在当前会话中有效,会话结束时(浏览器标签页关闭)数据会被清除。
- 操作方式与localStorage相同:同样以键值对的形式存储数据,API简单易用。
- 同源策略:与localStorage相同,sessionStorage的数据也只能在同一个源下共享。
代码示例
1. Cookie
由于Cookie主要通过HTTP响应头来设置,并且浏览器会自动在后续的请求中携带它们,因此直接在JavaScript中设置Cookie需要一些额外的步骤。这里我们使用一个简单的函数来设置和读取Cookie。
设置Cookie:
javascript
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 使用示例
setCookie('username', 'JohnDoe', 7); // 设置一个名为'username'的Cookie,值为'JohnDoe',有效期7天
读取Cookie:
javascript
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
// 使用示例
var username = getCookie('username');
console.log(username); // 输出: JohnDoe
2. localStorage
存储数据:
javascript
// 存储一个字符串
localStorage.setItem('greeting', 'Hello, World!');
// 存储一个对象(需要先转换为字符串)
var user = { name: 'JohnDoe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
读取数据:
javascript
// 读取并打印字符串
var greeting = localStorage.getItem('greeting');
console.log(greeting); // 输出: Hello, World!
// 读取并解析对象
var userJson = localStorage.getItem('user');
var user = JSON.parse(userJson);
console.log(user.name); // 输出: JohnDoe
3. sessionStorage
存储数据:
javascript
// 存储一个字符串
sessionStorage.setItem('sessionGreeting', 'Welcome to the session!');
// 存储一个对象(需要先转换为字符串)
var sessionUser = { name: 'JaneDoe', age: 25 };
sessionStorage.setItem('sessionUser', JSON.stringify(sessionUser));
读取数据:
javascript
// 读取并打印字符串
var sessionGreeting = sessionStorage.getItem('sessionGreeting');
console.log(sessionGreeting); // 输出: Welcome to the session!
// 读取并解析对象
var sessionUserJson = sessionStorage.getItem('sessionUser');
var sessionUser = JSON.parse(sessionUserJson);
console.log(sessionUser.name); // 输出: JaneDoe
注意:
sessionStorage
的数据在页面会话结束时(即浏览器标签页关闭时)会被清除。localStorage
和sessionStorage
的数据都存储在用户的浏览器中,并且遵循同源策略。- 考虑到安全性和隐私性,不应将敏感信息存储在客户端存储中,除非进行了适当的加密和验证。