cookie
<script>
document.cookie = 'a=1'
console.log(document.cookie) // style=null; a=1
</script>
设置了cookie,请求会携带给服务端。
cookie的构成:
名字name
值value
域domain
路径path
过期时间expires
安全标志secure
- 设置了cookie后,只要请求的域和路径正确,就会自动携带cookie
- 框架中也许需要在配置中手动设置withCredentials为true,这里是允许跨域携带cookie
- 以及服务端设置Access-Control-Allow-Credentials为true
localStorage
<script>
localStorage.setItem('a', 1)
// 等同于 localStorage.a = 1
// 等同于 localStorage['a'] = 1
console.log(localStorage.getItem('a')) // 1
// 等同于 localStorage.a
// 等同于 localStorage['a']
typeof localStorage.getItem('a') === string // true
</script>
sessionStorage
<script>
sessionStorage.setItem('a', 1)
// 等同于 session.a = 1
// 等同于 session['a'] = 1
console.log(session.getItem('a')) // 1
// 等同于 session.a
// 等同于 session['a']
typeof session.getItem('a') === string // true
</script>
三者的概述
- cookie是最开始的存储方式,要想方便使用,就要自己写一个小插件来解析cookie。cookie在页面关闭时就会删除,并遵循同源策略,别的页面不能访问本页面的cookie。
document.cookie = 'a=1'
中,不是对cookie的覆盖,而是追加a=1
.如果再执行document.cookie = 'b=2'
,那输出就是style=null; a=1; b=2
- localStorage和sessionStorage都是Storage的实例,是后于cookie出现的网页存储方式,其增删改查的API都相同,唯一的区别就是localStorage是永久存储,sessionStorage会在页面关闭时自动删除。
PS:sessionStorage无法在本地文件使用,必须有和服务端的会话。
cookie小插件
class CookieUtil {
static get(name) {
let cookieName = `${
encodeURIComponent(name)}=`,
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd === -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length), cookieEnd);
}
return cookieValue;
}
static set(name, value, expires, path, domain, secure) {
let cookieText = `${
encodeURIComponent(name) = encodeURIComponent(value)}`
if (expires instanceof Date) {
cookieText += `;expires="${
expires.toGMTString()}"`
}
if (path) {
cookieText += `;path="${
path}"`;
}
if (domain) {
cookieText += `;domain="${
domain}"`;
}
if (secure) {
cookieText += `;secure="${
secure}"`;
}
document.cookie = cookieText;
}
static unset(name, path, domain, secure) {
CookieUtil.set(name, "", new Data(0), path, domain, secure);
}
}
CookieUtil.set('a', 1)
const a = CookieUtil.get('a')
console.log(a); // 1