客户端存储localStorage和sessionStorage以及Cookie

前言

正常情况下，我们前端写的静态页面，只要刷新，就重置了，无法保留任何信息。为解决这一弊端

我们可以利用js中的客户端数据存储。

简介

在JS中存储在客户端数据有很多方式：Storage有两个对象：localStorage （本地存储）和sessionStorage（临时存储），Cookie，indexedDB（一般用于游戏开发存储体积较大）

总结

Cookie、localStorage、SessionStorage的区别

Cookie需要借助http，而Storage不需要

Cookie存储空间小4kb，Storage 空间大5Mb

Cookie的操作比较麻烦，Storage有相应的api帮助我们快速操作。

Cookie可以设置过期时间，Storage不能，localStorage没有过期时间，SessionStorage浏览器关闭就消失。

Cookie还可以给不同的path和域名设置cookie，storage不能。

localStorage设置后，整个域名共享，SessionStorage只有对应的页面可以使用，其他页面无法使用。

他们可以实现的功能大致相同。

Storage

Storage分为localStorage和sessionStorage，他们有相同的API可以进行添加、修改、删除、清空操作。

• setItem(key, value)
• removeItem(key)
• getItem(key)
• clear()

这两个存储的方法一致，是一样的效果。

这个中间只能存字符串，引用类型存储时会自动调用toString方法，如果想要存储对象或者数组，可以使用JSON.stringify进行转换，转换为字符串

特性

本地存储localStorage

存储数据到本地，只要你不主动删除，并且电脑浏览器不被卸载，这个数据就永远可以被获取到存储大小一般为10m甚至更大，在所有同源窗口中都是共享的，不参与浏览器与服务器的传递；

临时存储sessionStorage

存储数据在本地，只要浏览器关闭，则会话存储就会被清空，存储大小一般为5m甚至更大，不在不同的浏览器窗口中共享，不参与浏览器与服务器的传递；

cookie

相比Storage存储量更小仅为4k，前后端人员都能设置cookie，在所有同源窗口中都是共享的，参与浏览器与服务器的传递，还有第一次请求是没有cookie的，通常是由后端人员设置，服务器在收到请求之后会在响应中添加头部 Set-Cookie，并标识

cookie的缺点：

• 存储小。只有4kb
• 自动被携带http请求中，导致请求时间变长。
• 必须依赖服务器
• cookie比较早，相关api比较老，不好操作。需要人为封装函数。