前端项目中 cookie、sessionStorage 和 localStorage的详细用法

原创

于 2022-01-10 16:47:01 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了前端开发中常用的存储技术，包括cookie、sessionStorage和localStorage的使用方法。详细解释了如何设置、读取、删除这些存储，并提供了JSON对象的存储示例。

1.首先加载模块

npm i js-cookie -S

2.在使用cookie的页面上进行引入

import Cookies from 'js-cookie'

3，使用方法

创建一个在整个网站上有效的Cookie

Cookies.set('name', 'value');

创建一个从现在起7天后过期的cookie，在整个站点上有效：

Cookies.set('name', 'value', { expires: 7 });

创建一个过期的cookie，对当前页面的路径有效：

Cookies.set('name', 'value', { expires: 7, path: '' });

读取cookie：

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

阅读所有可见的Cookie：

Cookies.get(); // => { name: 'value' }

删除cookie：

Cookies.remove('name');

删除对当前页面路径有效的cookie：

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!