前言:前端开发的时候,在页面刷新之后,我们的所有数据都会被清空,这时候就要用到本地存储技术了,前端的存储数据的方式有四种:cookie、localStorage、sessionStorage和indexDB。
一、使用方式:
1、前端设置和获取cookie的方式:
const setCookie = () => {
document.cookie = `username=jupeng1; path=/; expires=${new Date(new Date().getTime() + 60 * 1000 * 15)}`;
};
const getCookie = () => {
const { cookie } = document;
console.log('cookie', cookie);
};
2、使用sessionStorage:
sessionStorage.setItem('name', 'jupeng');
sessionStorage.setItem('age', 26);
const name = sessionStorage.getItem('name');
const age = sessionStorage.getItem('age');
console.log(name, age);
3、使用localStorage:
localStorage.setItem('username', 'pengpeng');
localStorage.setItem('age', 18);
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');
console.log(username, age);
二、区别:
1、生命周期:
cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效
localstorage:除非被手动清除,否则将会永久保存
sessionstorage: 仅在当前网页会话下有效,关闭页面或者浏览器后就会被清除
2、存放数据大小:
cookie:4KB左右
localstorage和sessionstorage: 可以保存5MB的信息
3、http请求:
cookie: 每次都会携带在http头中,如果使用cookie保存过多数据会消耗过多的流量
localstorage和sessionstorage:仅在客户端存储,不参与和服务器通信
4、易用性:
cookie: 需要程序员自己封装
localStorage和sessionStorage比较好用
三、应用场景:
从安全性来说,因为每次http请求都会携带cookie信息,这样无形中浪费了带宽,所以cookie应该尽可能少的使用,另外cookie还需要指定作用域,不可以跨域调用,限制比较多。但是用来识别用户登录来说,cookie还是比storage更好用的。其他情况下,可以使用storage,就用storage。
storage在存储数据的大小上面秒杀了cookie,现在基本上很少使用cookie了,因为更大总是更好的,哈哈哈你们懂得。
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面,一个是关闭网页就清除了信息。localStorage可以用来跨页面传递参数,sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数。