VUE中localStorage，sessionStorage，cookie三种本地存储介绍及其简单的使用方法

原创已于 2024-04-23 17:48:26 修改 · 989 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #缓存

于 2024-04-23 17:46:23 首次发布

本文介绍了JavaScript中localStorage、sessionStorage和Cookie三种本地存储技术，包括它们的数据生命周期、容量限制、与服务器通信方式以及使用方法，重点展示了如何在前端代码中操作这些存储机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.localStorage

数据的生命期：除非被清除，否则永久保存；

存放数据大小：一般为5MB ；

与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器的通信；

易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持；

1.1使用

存储参数（setItem）

localStorage.setItem("参数名",参数值)
//例

export default {
    data() {
        return {
            name: "123"
        }
    },
    methods: {
        sto() {
            localStorage.setItem("v", this.name)
        }
    }
}

使用参数（getItem）

//在需要取参得地方书写
localStorage.getItem('参数名') //参数名为存储时得名字
//例
localStorage.getItem('v')

删除参数（removeItem）上文中我们提到localStorage除非被清除，否则永久保存，所以需要在合适得时机清除掉来缓解系统的压力

//在需要删除的地方书写
localStorage.removeItem('参数名') //与存储时的参数名一致
//例
localStorage.removeItem('v')

2.sessionStorage

数据的生命期：仅在当前会话下有效，关闭页面或浏览器后被清除；

存放数据大小：一般为5MB ；

与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器的通信；

易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持；

2.1使用

sessionStorage的使用方式( 存储参数（setItem），使用参数（getItem），删除参数（removeItem）),均与localStorage一致，只需要将例子中的localStorage替换成sessionStorage即可正常使用，就不进行过多的赘述

接下来我们来说cookie的使用

3.Cookie

数据的生命期：一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效；

存放数据大小：4K左右；

与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

易用性：需要程序员自己封装，源生的Cookie接口不友好

3.1使用

1.安装

打开终端（如果使用的是vscode编辑器，可以按ctrl+`快捷键）

输入

npm install js-cookie --save

之后在src/目录下的 main.js文件之中引入

import Cookies from "js-cookie";

2.使用

存储参数（set）

Cookies.set('参数名', '参数值')

使用参数（get）

Cookies.get('参数名')

删除参数（remove）

Cookies.remove('参数名')