cookie和sessionStorage & localStorage | Asuhe = Born in poverty, died of numbness

# 背景

本文主要围绕 What、Why、How 这三个方面谈谈 sessionStorage 和 localStorage 的联系与区别。

# What

sessionStorage 和 localStorage 都是 BOM 提供给我们在浏览器上进行本地存储数据的 API，利用它我们可以实现在本地浏览器存储一些数据。这两个方法都是隶属于 Window 这个顶级 BOM 下的，在需要的时候我们直接调用即可。

# Why

在某些场合下我们希望能够在用户本地的浏览器上存储一些数据以提高用户体验，所以本地存储技术就应运而生了。典型的应用场景就是我们在登录网站时希望下次登录网站能够记住我们的账号，以免再重新输入。这种时候就可以使用 localStorage 进行一个本地存储用户名，在用户加载完页面的时候就检测用户浏览器上有无存储相应账号数据，若有则自动填入。

# How

在使用方式上 sessionStorage 和 localStorage 是类似的

# window.sessionStorage

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

# window.localStorage

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：(所有都清除掉)

localStorage.clear()

# cookie 和 sessionStorage & localStorage 的特点

存储容量约为 4KB
同源页面可以共享
有 path 的概念，可以将 cookie 限制在某个路径下
会随着 http 头发送给服务端

# sessionStorage

存储容量约为 5MB
同一个页面下可以共享数据
生命周期到页面关闭。当页面关闭后存储在浏览器上数据就会被清除，不会保留下来下次打开页面就没有数据了
存在本地端，不会发送给服务端

# localStorage

存储容量约为 5MB
同源页面共享数据，可以跨页面共享数据
生命周期为永久，仅当我们手动删除时才会清除数据，否则下次打开页面或者浏览器数据依然存在
存在本地端，不会发送给服务端

# sessionStorage & localStorage 共同点

数据都存储在用户的浏览器中
数据都以键值对的形式存储
仅能存取字符串，可以将对象 JSON.stringify () 编码后存储
读取方便，刷新页面也不会丢失数据

# localStorage & cookie 共同点

同源页面可以共享数据

前端