js、jquery、vue中使用浏览器的储存方式cookie,LocalStorage和SessionStorage

前言：

       在我们的项目中经常会遇到需要临时储存数据的情况，我们可供选择的方式有很多，比如：cookie,localstorage,sessionstorage,或者保存在请求后台的head中（比如token）,我们在这里详细说下他们的方法。

第一：cookie

js/jq:

暂无

vue：这里使用js-cookie

具体步骤：更多介绍

1、安装 js-cookie

npm install js-cookie --save

2、页面引入

import Cookies from 'js-cookie'

3、具体使用

1.存到Cookie去：

Cookies.set('name', 'value');
Cookies.set('name', 'value', { expires: 7 });
Cookies.set('name', 'value', { expires: 7, path: '' });

2.在Cookie中取出

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
Cookies.get(); // 取出来全部 cookies:

3.删除

Cookies.remove('name');
Cookies.remove('name', { path: '' }); // removed!

第二：LocalStorage

本地储存，打开f12 - Application - Local Storage可看到

*存储格式都是字符串，任何其他类型都会转成字符串存储

优点：

        --1--是对Cookie的优化
        --2--没有时间限制的数据存储
        --3--在隐私模式下不可读取
        --4--大小限制在500万字符左右，各个浏览器不一致
        --5--在所有同源窗口中都是共享的
        --6--本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存）
        --7--不能被爬虫爬取，不要用它完全取代URL传参
        --8-- IE７及以下不支持外，其他标准浏览器都完全支持

1、vue中使用和js中是一样的：

1、判断浏览器是否支持 localStorage 属性
if (window.localStorage) {
    console.log('支持 localStorage');
} else {
    console.log('不支持 localStorage');
}

具体操作	
2、存值
	localstorage.setItem('name','张三');

3、拿到我们存的值
	localstorage.getItem('name');

4、删除某一个值
	localstorage.removeItem('name');	

5、删除所有的值
	localstorage.clear();

2、jquery中就是在js/vue的版本里面加个window

存值
	window.localstorage.setItem('name','张三');

拿到我们存的值
	window.localstorage.getItem('name');

删除某一个值
	window.localstorage.removeItem('name');	

删除所有的值
	window.localstorage.clear();

第三：SessionStorage（使用方法跟LocalStorage一样）

会话级储存，打开f12 - Application - SessionStorage可看到

使用场景：经常被用在特殊登录部分

优点：

        --1--针对一个 session 的数据存储

        --2--大小限制在5M左右，各个浏览器不一致

        --3--仅在当前浏览器窗口关闭前有效（适合会话验证）

        --4--不在不同的浏览器窗口中共享，即使是同一个页面