浏览器存储(cookie、localStorage、sessionStorage)

181 阅读3分钟

cookie

     浏览器在本地按照一定规则存储一些文本字符串,每当浏览器像服务器发送请求时带这些字符串。服务器根据字符串判定浏览器的状态比如:登录、订单、皮肤。服务器就可以根据不同的cookie识别出不同的用户信息。

(1)、cookie如何产生

1、由服务器产生,在浏览器访问服务器时由服务器返回一个Set-Cookie响应头,当浏览器解析这个响应头时设置cookie

2、通过浏览器js脚本设置:

document.cookie="key=value[; expires=date][; domain=domain][; path=path][; secure]"

key设置的是cookie的键,value设置的是cookie的值;

document.cookie = 'name=monsterooo';

expires:设置cookie的生存时间,当设置一个时间时,每次访问浏览器会用当前时间和cookie的expries做比对,如果过期cookie则会被删除。设置格式为GMT时间格式。

var t = new Date( +(new Date()) + 1000 * 120 );
document.cookie = `name=monsterooo;expires=${t.toGMTString()};`;

domain:在浏览器读取cookie的时候只有当cookie的domain和浏览器当然的域名匹配才能读取到。

默认情况下cookie的domain和当然访问一样。但是很多网址不止有一个域名比如:a.example.com和b.example.com如果他们想要共享cookie那么cookie的domain需要设置为domain=.example.com,path路径需要设置为path=/。这样之后两个域名都能同时访问到cookie了。

var t = new Date( +(new Date()) + 1000 * 120 );
document.cookie = `name=monsterooo;expires=${t.toLocaleTimeString()}; domain=.example.com; path=/`;

path:path路径和domain功能类似,只是path的范围更小。path控制cookie在当前域名的路径,只有路径相匹配cookie才能被读取到

例如:www.example.com/order/index…

document.cookie = order=10; expires=${t.toGMTString()}; path=/order;

那么只有在/order路径下的页面cookie中才会带有order值。

localStorage和sessionStorage

是HTML5 提供了两种在客户端存储数据的新方法,挂载在window对象下。

是本地存储,数据不是由服务器请求传递的。从而它可以存储大量的数据,而不影响网站的性能

localStorage和sessionStorage都继承于Storage,提供了统一的api来访问和设置数据。api列表为:

  • clear: 清空存储中的所有本地存储数据

  • getItem :接受一个参数key,获取对应key的本地存储

  • key: 接受一个整数索引,返回对应本地存储中索引的键

  • removeItem: 接受一个参数key,删除对应本地存储的key

  • setItem: 接受两个参数,key和value,如果不存在则添加,存在则更新。

    localStorage.setItem('order', 'a109'); console.log(localStorage.key(0)); // order console.log(localStorage.getItem('order')) // a109 localStorage.removeItem('order'); localStorage.clear(); // 对象访问方式同样有效 localStorage.order = 'b110'; localStorage.order; // b110

localStorage特性

**localStorage:**生命周期是永久性的。localStorage存储的数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据。如果 想设置失效时间,需自行封装。

sessionStorage 特性

**sessionStorage** :生命周期是在浏览器关闭前。

  • 关闭浏览器sessionStorage 失效;
  • 页面刷新不会消除数据;
  • 只有在当前页面打开的链接,才可以访sessionStorage的数据,使用window.open打开页面和改变localtion.href方式都可以获 取到sessionStorage内部的数据;

session

session数据放在服务器上,不建议使用

区别

1、存储位置:

localStorage、cookie、sessionStorage 都存贮在浏览器(客户端)。

2、存储时效

**localStorage:生命周期是永久的, **同源窗口中

sessionStorage :生命周期是关闭浏览器前。

cookie:根据设置的expire字段决定时间。默认到浏览器关闭

3、存储大小

localStorage:5M

sessionStorage :5M

cookie:4K

4、作用域不同

sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

localstorage在所有同源窗口中都是共享的;

cookie也是在所有同源窗口中都是共享的