前端存储方式

2024年5月4日 7次阅读 来源: 麦子的小库存

前言：前端开发的时候，在页面刷新之后，我们的所有数据都会被清空，这时候就要用到本地存储技术了，前端的存储数据的方式有四种：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用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

    原文作者：麦子的小库存
    原文地址: https://blog.csdn.net/qq_36162529/article/details/120671469
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞