本地存储的方法分别有哪些？

Sessionstorage、Localstorage、Cookie这些存储方式是浏览器自带的本地存储。 其中Localstorage是永久性存储，Sessionstorage和Cookie是周期性存储。

Cookie他是一个什么呢？

Cookie是浏览器存储数据的一种方式，因为存储在用户本地，而不是存储在服务器上。

为什么要使用Cookie？

场景： 因为有一些项目在使用期间不需要太大的数据存储，比如存储用户登录数据。Sessionstorage和Localstorage  一般用于大数据的存储，而Cookie是专门为了小数据存储而出现的，只有4kb内存大小，最重要的是Cookie可以设置时间周期自动删除数据。

下面就让我们讲一讲如何使用CookieCookie基础写法：

document.cookie = 'username=lp';
document.cookie = 'age=aaaa';

Cookie读取方法：

console.log(document.cookie)
//控制台输出 username=lp; age=aaaa

读取值是以键值对构成的一串字符串，每一个键值对之间由分号加一个空格分隔开来。

下面看一下Cookie的控制台状况

本地存储方法之Cookie存储的使用，以及Cookie的优缺点_键值对

Cookie写法注意：创建Cookie是一定要使用键值对的方法来写，要有属性名和属性值，并且属性名命名尽量使用英文命名，值可以英文也可以使用中文， 如果用中文进行赋值则必须在存入时用 encodeURLComponent() 编码，读取时用decodeURLComponent() 进行解码。

//encodeURIComponent()存储
document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent('张三')}`;
//decodeURIComponent()读取

console.log(document.cookie);
//如果直接打印则会出现乱码，username=lp; age=aaaa; %E7%94%A8%E6%88%B7%E5%90%8D=%E5%BC%A0%E4%B8%89
console.log(decodeURIComponent(document.cookie));
//使用解码之后，username=lp; age=aaaa; 用户名=张三

后台面板

本地存储方法之Cookie存储的使用，以及Cookie的优缺点_本地存储_02

Cookie的生命周期设置Cookie最重要的就是生命周期的设置，如果没有设置生命周期，则在关闭浏览器的时候就会进行Cookie数据的清除。 所以这种时候就需要设置一个生命周期。 Cookie设置周期的方法有两种一种是日期设置一种是秒数设置。 expires：值为Date类型

document.cookie = `username=zs;expires=${new Date('2040-02-02 00:00:00')}`
//标识当前Cookie会保存到2040-02-02 00:00:00日期

max-age:值为数字，表示当前时间+多少秒后过期，单位是秒

document.cookie = 'username=zs; max-age=5'
//将当前Cookie生命周期存储5秒

生命周期到期之后Cookie就会自动在浏览器中清除；

Cookie的优点以及缺点优点：

  1. 可配置到期规则 Cookie 可以在浏览器会话结束时到期，或者可以在客户端计算机上无限期存在；
  2. 使用方法简单只要存储键值对即可；
  3. 可以在本地进行存储以及使用；

缺点：

  1. Cookie内存小，只有4kb的大小；
  2. Cookie安全问题打，容易被恶意篡改；

Cookie使用介绍就此结束。

作者主页有关于本地存储的文章，有想了解的进入传送门：传送