cookie、LocalStorage、sessionStorage的基础使用

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 应用场景

用来保存临时数据，防止用户刷新页面之后丢失参数