# 快捷导航

# 前言

Cookie 用于存储 web页面的用户信息

点击即可查看代码
function setCookie(key, value, expiredays) {
  var exdate = new Date(); // 当前时间
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie =
    key +
    '=' +
    escape(value) +
    (expiredays == null ? '' : ';expires=' + exdate.toGMTString());
}
1
2
3
4
5
6
7
8
9
点击即可查看代码
function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString();
  }
}
1
2
3
4
5
6
7
8
点击即可查看代码
function getCookie(name) {
  var arr,
    reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  if ((arr = document.cookie.match(reg))) {
    return arr[2];
  } else {
    return null;
  }
}
1
2
3
4
5
6
7
8
9

# localStorage 和 sessionStorage 的增删改查

  • # 存储数据

sessionStorage.setItem('key', 'sessionStorage的值'); // 存储数据
1
  • # 获取指定键名数据

let dataSession = sessionStorage.getItem('key'); //获取指定键名数据
let dataSession2 = sessionStorage.key; //sessionStorage是js对象,也可以使用key的方式来获取值
console.log(dataSession, dataSession2, '获取指定键名数据');
1
2
3
  • # 获取 sessionStorage 全部数据

let dataAll = sessionStorage.valueOf(); //获取全部数据
console.log(dataAll, '获取全部数据');
1
2
  • # 清空 sessionStorage 数据

sessionStorage.clear(); //清空
1

localStorage

只要将sessionStorage替换成localStorage即可,他们两个的使用方法完全是一样的

# 三者比较

  • # 生命周期

  • cookie: 可设置失效时间,没有设置的话,默认是关闭浏览器后失效

  • localStorage: 除非被手动清除,否则将会永久保存。

  • sessionStorage: 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除

  • # 存放数据大小

  • cookie:4KB 左右

  • localStoragesessionStorage:可以保存 5MB 的信息。

  • # http 请求

  • cookie:每次都会携带在 HTTP 头中,如果使用cookie保存过多数据会带来性能问题

  • localStoragesessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信

  • # 易用性

  • cookie:需要程序员自己封装,源生的 Cookie 接口不是很友好

  • localStoragesessionStorage:原生接口可以接受,也可再次封装来对ObjectArray有更好的支持

# 应用场景

从安全性来说,因为每次http请求都会携带cookie信息,这样无形中浪费了带宽,所以cookie应该尽可能少的使用,另外 cookie 还需要指定作用域,不可以跨域调用,限制比较多。

但是用来识别用户登录来说,cookie还是比 storage 更好用的。其他情况下,可以使用 storage,就用 storage。

storage 在存储数据的大小上面秒杀了 cookie,现在基本上很少使用 cookie 了

localStoragesessionStorage唯一的差别一个是前者永久保存在浏览器里面,后者是关闭网页就清除了信息。localStorage可以用来跨页面传递参数,sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数

# 浏览器支持情况

localStoragesessionStoragehtml5才应用的新特性,可能有些浏览器并不支持,这里要注意。

cookie的浏览器支持没有找到,可以通过下面这段代码来判断所使用的浏览器是否支持cookie

if(navigator.cookieEnabled) {
  alert("你的浏览器支持cookie功能");//提示浏览器支持cookie
} else {
  alert("你的浏览器不支持cookie");//提示浏览器不支持cookie   }
1
2
3
4
白色

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐