本地存储以及区别

1. 什么是本地存储

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。 在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。 与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

利用localStorage做本地存储 保存的数据都仅限于该域名下 浏览器关闭，然后重新打开后数据仍然存在；localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 大小在5M左右

2.cookie

1.cookie的应用场景

1, 保存用户登录状态

2, 跟踪用户行为

3, 定制页面

4, 购物出(浏览过的产品...)

2.cookie的特点

1. 容量比较小, 4KB

2. cookie有数量限制, 最多20条(IE 6)，其他浏览器50条

3. cookie可以被删除

4. cookie安全性问题

5. cookie有期限

6. 只能存储文本

注意：js中的cookie只能在服务器环境下才能使用，所以必须开启xampp服务器 cookie的增删改查操作

3.cookie的增删改查

注意：cookie需要在服务器环境下运行 cookie每次只能设置一个值，但是获取的时候可以获取全部

1.cookie的添加

toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。

//设置2天后过期
var expires = new Date();
expires.setTime(expires.getTime()+2*24*60*60*1000);
document.cookie = "username="+escape('echo')+";expires="+expires.toGMTString();
// 用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2.cookie的修改

修改cookie值，只需要重新赋值  document.cookie = "username="+escape("echo");

document.cookie = "username="+escape('echo')+";expires="+expires.toGMTString();

3.cookie的获取

//设置cookie值
document.cookie = "userid=9;username=echo";
//获取cookie值
var str = document.cookie;
//将值切割成数组
var arr = str.split(";");
var userid;
//遍历数组
for(var i=0;i<arr.length;i++){
  var value = arr[i].split("=");
  if(value[0] == 'userid'){
    userid = value[1];
  }
}
alert(userid);

4.cookie的删除

只需要把失效日期改成比现在日期早一点（这里是早 10 毫秒），再用同样的方法设定 Cookie，就可以删掉 Cookie 了。（注意删除时需要使用toGMTString方法）

//删除cookie
var expires = new Date();
expires.setTime(expires.getTime() - 10);
document.cookie = 'username='+escape('echo')+';expires=' + expires.toGMTString();
// 将cookie设置为 1970-1-1 00:00:00
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

5.cookie的工具库

https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js

使用

// 组件中使用
// 写入cookie
Cookies.set('name', 'value')

// 读取
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

// 读取所有可见的cookie
Cookies.get()

// 删除某项cookie值
Cookies.remove('name')

cookie设置过期时间

//1、存cookie  set方法支持的属性有 ：  expires->过期时间    path->设置为指定页面创建cookie   domain-》设置对指定域名及指定域名的子域名可见  secure->值有false和true ,表示设置是否只支持https,默认是false
Cookies.set('key', 'value');  //创建简单的cookie
Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie
Cookies.set('key', 'value', { expires: 17, path: ''  }); //可以通过配置path,为当前页创建有效期7天的cookie

//2、取cookie
Cookies.get('key'); // 获取指定key 对应的value
Cookies.get(); //获取所有value

//3、删除cookie
Cookies.remove('key');//删除普通的cookie
Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie

注意：如果存的是对象，如： userInfo = {age:111,score:90}; Cookie.set('userInfo',userInfo)

取出来的userInfo需要进行JSON的解析,解析为对象：let res = JSON.parse( Cookie.get('userInfo') );

当然你也可以使用：Cookie.getJSON('userInfo');

3.localStorage

这里要特别声明一下，如果是使用IE浏览器的话，那么就要UserData来作为存储，这里主要讲解的是localStorage的内容，所以userData不做过多的解释，而且以博主个人的看法，也是没有必要去学习UserData的使用来的，因为目前的IE6/IE7属于淘汰的位置上，而且在如今的很多页面开发都会涉及到HTML5\CSS3等新兴的技术，所以在使用上面一般我们不会去对其进行兼容 兼容性判断

兼容解决方法

if(!window.localStorage){
  alert("浏览器支持localstorage");
}else{
  //主逻辑业务
}

1.localStorage的优势

1. localStorage拓展了cookie的4K限制

2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

特点：类似于兼职对的结构 存入的值会被自动转为字符串格式

2.localStorage的增删改查

1.添加数据（以key、value的形式存储，将会把键值对添加到存储中，如果键名存在，则更新其对应的值）

localStorage.属性名 = 属性值
localStorage[属性名] = 属性值
localStorage.setItem(key，value) // 推荐使用

2.修改数据

第二次添加会将第一次添加的覆盖；前提是：key是相同的

3.获取数据（该方法接受一个键名作为参数，返回键名对应的值）

localStorage.属性名
localStorage[属性名]
localStorage.getItem(key) // 推荐使用

4.删除数据(该方法接受一个键名作为参数，并把该键名从存储中删除)

单个删除：localStorage.removeItem()
全部删除：localStorage.clear() // 调用该方法会清空存储中的所有键名

总览：

 if(!window.localStorage){
       alert("浏览器支持localstorage");
 }else{
       //主逻辑业务
       // 添加
       window.localStorage.username = 'zhangsan';
       window.localStorage['age'] = 20;
       window.localStorage.setItem('hobby','LOL');

       // 修改
       var stroage = window.localStorage;
       stroage.setItem('hobby','DNF');
       console.log(window.localStorage);

       // 获取
       console.log(window.age);
       console.log(window['age']);
       console.log(window.getItem('age'));

       // 删除
       stroage.removeItem('hobby');
 }

注意：

1. 输出localStroage的时候，如果下面又删除，上面显示的内容点开之后里面是空的，因为点击的时候相当于重新请求数据

2. 同源策略，不同网站的数据是不共同的。

3. 可以在本地使用

4. 只能存储字符串【值是字符串】

5. 永久存储

3.localStorage的局限

1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的 JSON对象类型需要一些转换（JSON.parse（）//转为数组）（JSON.stringify() //转为字符串）

3. localStorage在浏览器的隐私模式下面是不可读取的

4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5. localStorage不能被爬虫抓取到

4.sessionStorage

用法和localstroage是一样的

唯一的区别是：实效性

localstroage：是永久存储的

sessionStorage：是会话级别的

两种会话方式的结束：代码控制和浏览器关闭

var session = window.sessionStorage;
// 添加
session.setItem('username','lisi');
session.setItem('age','29');     
// 修改
session.setItem('username','wangwu');
// 查询
console.log(session.getItem('username'));
// 删除
session.removeItem('username'); // 删除一个
session.clear(); // 删除多个

5.面试题：cookie，localStroage，sessionStroage的区别

cookie：

1. 前后端都可以操作

2. 存储大小 4KB

3. 发送请求时，自动将cookie的值发送给后端；数据相对不安全，可能会被劫持

4. 实效性：默认是会话级别，可以设置有效期

localStroage：

1. 前端操作

2. 存储大小 5MB

3. 永久保存

sessionStroage：

1. 前端操作

2. 存储大小 5MB

3. 会话级别

共同点： 只能存字符串 同源策略，同一域名，同一IP，同一段扣下的数据可以共通

面试题：localStorage和sessionStorage有什么区别 1.生命周期不同:localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空（所以有些时候sessionStorage会用来储存用户的账号和密码） 2.作用域不同：当相同浏览器，相同协议，域名，端口的情况下：不用的Tabs页面（俗话：打开相同的好几个页面），localStorage数据是共享的，sessionStorage是不共享的