1 cookie
cookie 是浏览器储存在用户电脑上的一小段文本文件。纯文本格式的;
1.1 基本用法
(1)创建cookie:每次只能创建一个cookie键值对
document.cookie="name=xiaobai"
设置有过期时间的cookie:
document.cookie="age=5; expires=Thu, 18 Dec 2043 12:00:00 GMT";
(2)读取cookie:返回域名下所有的cookie
var name=document.cookie // 返回所有cookie
(3)删除cookie:通过将过期时间指定为原始时间,即可删除
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
上面是基本的用法;一般通过定义函数操作cookie;如下
//设置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
var name = cname + "=";
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);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
1.2 生命周期
随便打开一个网页的cookie;在过期一栏可以看到,只有两个值:sesseion和过期时间;
所以cookie的生命周期有两种:一是页面关闭前,二是指定的过期时间内;
强调一下,session代表当前页面是打开状态,包括刷新,关闭重新打开,cookie一直是有效的;手动清除就没办法了。
创建两个cookie,如下图
可以看出 cookie默认的生命周期是session;
1.3 作用域
作用域遵循同源措施,但这里的同源跟浏览器的同源策略不一样;cookie的同源指的是Domain和path都相同才算在一个作用域,我们测试一下:
(1) 作用域相同情况
以如下两个地址为例:
打开 https://blog.csdn.net/nav/java,在控制台设置document.cookie="nav1=java"
打开https://blog.csdn.net/nav/python,在控制台设置document.cookie="nav2=python"
打开cookie如下:
可以看到Domain和Path一样,所以属于同源,该两个网页可以互相访问彼此的cookie
(2) 作用域不同情况
上面cookie别清除;
打开csdn首页https://blog.csdn.net/,然后打开控制台设置document.cookie="home=csdn";打开cookie看一下:
发现看不到之前两个页面的cookie;对比可以发现path一栏不一样,所以不同源是不可以访问的;
其次再次打开,python和java这两个页面,查看cookie如下
如上home的Path跟两个子页面不一样,但是可以看到父页面的cookie;所以呢,这里有一个特例
同源特例;
二级路径可以访问到父路径的cookie;及在Path=/下设置的cookie,在Path=/sub/子路径的页面中是可以访问的;亲测这个结果是正确的。
1.4 cookie限制
一个域名下cookie的大小限制是4k,数量限制每个浏览器内核不同:
数量不同:
Firefox 每个域名 cookie 限制为 50 个。
Opera 每个域名 cookie 限制为 30 个。
Safari/WebKit 貌似没有 cookie 限制。但是如果 cookie 很多,则会使 header 大小超过服务器的处理的限制,会导致错误发生。
大小基本一样,都是4k左右,其中包括key value以及等号三部分占的内存。
1.5 应用场景
适合记录用户登录状态,刷新或者关闭浏览器再打开都可以记住用户的状态
2 localStorage
2.1 基础用法
设置本地存储
localStorage.setItem('user','xiaobai');
获取本地存储
localStorage.getItem('user');
删除本地存储
localStorage.removeItem('user');
清除本地存储
localStorage.clear();
2.2 生命周期
永久保存在浏览器,而且数据是保存在用户电脑上的,只要不手动清除,会一直保存
路径在C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Default\Local Storage
2.3 作用域
只要在同一个域名之下,都可以访问localStorage的值;可以跨不同页面
3 sessionStorage
3.1 基本用法
设置会话存储
sessionStorage.setItem('user','xiaobai');
获取会话存储
sessionStorage.getItem('user');
删除会话存储
sessionStorage.removeItem('user');
清除会话存储
sessionStorage.clear()
3.2 生命周期
sessionStorage周期比较短,刷新可以保留;页面一旦关闭,sessionStorage就失效;所以一定程度上比cookie的生命周期短
3.3 作用域
sessionStorage与localStorage一样,可以在同一个域名的所有页面中共享值,都可以访问到
3.4 应用场景
用来保存临时数据,防止用户刷新页面之后丢失参数