Cookie
记录用户使用习惯:何时访问,访问内容,每个页面停留时间操作
公开透明,不要在cookie中保存敏感信息
特点
1.存于用户本地,浏览器每次请求后,自动发送到服务器端
2.有数量限制
每个域名下的 Cookie 数量有限
当超过单个域名限制之后,再设置 Cookie,浏览器会清除之前设置的
3.有大小限制
每个 Cookie 的存储容量很小,最多只有 4KB 左右
用法
写
浏览器不能写入cookie。服务器可写入cookie
document.cookie = "username=zs";
document.cookie = "age=18";
错误写法:
document.cookie = 'username=zs; age=18';
读
console.log(document.cookie);// username=zs; age=18
属性
同一个cookie的Name\Domain\Path三个字段都要相同
Name
名称用英文
Value
值可用中文。
中文要编码解码
encodeURLComponent()编码(写)
decodeURLComponent()解码(读)
document.cookie = "username=${encodeURLComponent(张三)}";
失效时间-失效后浏览器清除cookie
1.未设置失效时间的cookie,叫会话cookie(session);
存在于内存中,浏览器关闭时(会话结束时),cookie消失
2.设置失效时间-expires/max-age
1)expires值为Date类型
document.cookie = "username=zs;expires=${new Date('2100-1-01-00:00')}";
2)max-age值为数字,单位:秒
值为0/负数,直接删除
document.cookie = "username=zs;max-age=5";
document.cookie = "username=zs;max-age=${24*3600*30}"
Domain-限定cookie访问范围(不同域名)
不能跨Domain读写,只读写当前域或者父域
例:
PC端 www.imooc.com
移动端m.imooc.com
父域 imooc.com
Path-限定cookie访问范围(同一域名下)
只读写当前路径或上级路径的cookie,无法读写下级路径的cookie
HttpOnly-阻止通过JS访问
Secure-限定用https(而不是http)才可发给服务端
cookie请求发送到服务器端的条件-Domain、Path、Secure、不能过期
应用-实现网站语言的切换
前后端都可以创建 Cookie-依业务需求而定
localStorage
特点
1.存于用户本地,不会发送到服务器端
2.是持久化的本地存储:
除非手动清除(比如通过 js 删除,或者清除浏览器缓存),否则数据是永远不会过期的
3.不同的域名不能共用 localStorage
IE7及以下版本不支持 localStorage,IE8 开始支持
键和值是字符串类型
若不是字符串类型,会被转换再存
localStorage.setItem({}, 18);
// localStorage.setItem('students', [{},{}]);
console.log(
typeof localStorage.getItem('[object Object]'),
localStorage.getItem('[object Object]')
);
console.log({}.toString());
属性
length
console.log(localStorage.length);
方法
setItem()
localStorage.setItem("username", "alex");
localStorage.setItem("username", "zs");
localStorage.setItem("age", 18);
localStorage.setItem("sex", "male");
getItem()
console.log(localStorage.getItem("username"));
console.log(localStorage.getItem("age"));
// 获取不存在的返回 null
console.log(localStorage.getItem("name"));
removeItem()
localStorage.removeItem("username");
localStorage.removeItem("age");
// 删除不存在的 key,不报错
localStorage.removeItem("name");
clear()
localStorage.clear();
console.log(localStorage);
应用-实现自动填充
<form id="login" action="https://www.imooc.com" method="post">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" id="btn" value="登录" />
</form>
const loginForm = document.getElementById("login");
const btn = document.getElementById("btn");
const username = localStorage.getItem("username");
if (username) {
loginForm.username.value = username;
}
btn.addEventListener(
"click",
(e) => {
//阻止默认提交
e.preventDefault();
// 数据验证(此处省略)
// console.log(loginForm.username.value);
localStorage.setItem("username", loginForm.username.value);
//手动提交
loginForm.submit();
},false);
sessionStorage
当会话结束(比如关闭浏览器)的时候,sessionStorage 中的数据会被清空
sessionStorage.setItem('username', 'alex');
sessionStorage.getItem('username');
sessionStorage.removeItem('username');
sessionStorage.clear();
对比
/ | cookies | localStorage |
---|---|---|
存储量 | 最大4kb | 5mb或更大 |
特点 | 在服务器与浏览器间传递 | 存储在浏览器,不发给服务器 |
有效期 | 在限定的时间内有效 | 不手动清除永久有效 |