前端存储

一.介绍

前端存储指的是在浏览器端存储数据的技术，通常用于在客户端本地保存数据，提高用户体验和应用性能。

二.前端存储技术

前端存储数据可以让我们很容易的拿到我们想要的数据，而不必频繁的通过向服务器发送请求来获得数据

1.cookie

（1）介绍

Cookie是一种客户端存储技术，用于存储少量的文本数据。作用是在浏览器和Web服务器之间传递数据。可以使JavaScript的document.cookie API来读取和写入Cookie，但由于Cookie的大小和数量都受限制，因此仅适合存储较小的数据。

（2）应用场景

会话管理：通过Cookie可以在浏览器和服务器之间传递会话标识，以实现用户登录、购物车、购买记录等功能。

个性化设置：通过Cookie可以存储用户的个性化设置，例如语言偏好、主题风格等。

跟踪用户行为：通过Cookie可以记录用户的浏览记录、点击行为等，用于统计分析和广告投放。

上述是cookie的一些常见的应用场景。

（3）cookie使用

上述提到我们可以使用JavaScript来进行读取和写入Cookie，下面是一个例子

// 设置Cookie
document.cookie = "name=John Doe; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";

// 读取Cookie
const cookies = document.cookie;
console.log(cookies); // "name=John Doe"

目前，在前端开发中，最热门的框架莫过于vue.js了，那么我们在vue中有什么方法使用cookie呢？下面是一个示例

在Vue中使用Cookie可以通过第三方库来实现，比较常用的是js-cookie和vue-cookies。这里以js-cookie为例，介绍如何在Vue中使用Cookie。

首先安装依赖

npm install js-cookie --save

引入js-cookie

import Cookies from 'js-cookie'

使用

// 设置名为username，值为John Doe的Cookie，有效期为7天
Cookies.set('username', 'John Doe', { expires: 7 })

// 读取名为username的Cookie
const username = Cookies.get('username')

// 删除名为username的Cookie
Cookies.remove('username')

（4）注意：

由于Cookie是存储在浏览器端的，因此Cookie的安全性和隐私保护需要开发者自己负责。特别是在存储用户敏感信息（如密码、银行卡号等）时，应该考虑采用更安全的存储方式，如加密存储或使用服务器端存储等方法。

2.Web Storage

Web Storage是一种浏览器端存储技术，可以用于在浏览器中存储和获取键值对数据。它提供了两种存储方式：localStorage和sessionStorage。

（1）区别

这里是指localStorage和sessionStorage

localStorage和sessionStorage的区别在于它们的生命周期不同。localStorage中存储的数据是持久化的，即在浏览器关闭后数据依然存在；而sessionStorage中存储的数据只在当前会话（即浏览器窗口）有效，当浏览器窗口关闭后数据会被删除。

（2）使用示例

设置值

// 存储名为username，值为John Doe的数据到localStorage中
localStorage.setItem('username', 'John Doe')

// 存储名为password，值为123456的数据到sessionStorage中
sessionStorage.setItem('password', '123456')

读取值

// 从localStorage中读取名为username的数据
const username = localStorage.getItem('username')

// 从sessionStorage中读取名为password的数据
const password = sessionStorage.getItem('password')

删除值

// 从localStorage中删除名为username的数据
localStorage.removeItem('username')

// 从sessionStorage中删除名为password的数据
sessionStorage.removeItem('password')

（3）注意

Web Storage这种前端存储方式也是存储在浏览器端的，因此和Cookie一样存在安全性问题。

前端存储（cookie & webStorage）