那些被忽略但很好用的 Web API / SessionStorage

狡兔有三窟，储存用户端的资料当然也要有三个。

相信大家应该都有遇过需要将资料储存在用户端的需求，像是将後端的 SessionID 储存在 Cookie，或是将一些静态资料存在 LocalStorage，但今天想要分享的是一个大家比较少选择的 API - SessionStorage。

Cookie & LocalStorage

在介绍 SessionStorage 之前，我们先来复习一下 Cookie 和 LocalStorage 的一些特性，这样之後如果遇到类似情境就可以依照需求选择更适合的 API。

根据上面的特性，我们就知道 Cookie 比较适合储存小量、以时效性的资料，而且也因为每次发送请求时都会送出，所以才会被拿来储存 SessionID，以供後端进行验证。

跟 Cookie 比较不同，LocalStorage 就可以存一些比较大型、长期性的资料，常常会被拿来当作用户端的快取，以减少 fetch 资料的次数。

SessionStorage 则是跟 LocalStorage 几乎一样，且存放大小也是 5MB，最大的不同点在於，它会受到分页的限制，也就是说就算两个分页都处在同一个网站中，它们的 SessionStorage 也不会共用，且只要把分页关掉也同时会把 SessionStorage 给删除。

SessionStorage 这样的特性其实就有一个很实用的情境，那就是表单内容的储存，在网页中时常会有表单需要用户填写，例如基本资料、订单资料、意见调查等等，但如果使用者在填写过程中不慎离开页面或是重新整理，那可就功亏一篑了。

这时候 SessionStorage 就可以派上用场，把使用者填到一半的内容给储存起来，只要使用者不是关掉分页，离开再回来都可以保留填写进度。而且就算使用者开了好几个分页进行不同订单的填写，分页间的 SessionStorage 资料也不会相互干扰。

SessionStorage 就连 methods 也都和 LocalStorage 是一样的，setItem 可以让我们下增/修改一笔 SessionStorage：

sessionStorage.setItem("key", "value");
// 如果想要储存物件、阵列等复杂型别，可以先进行字串化
sessionStorage.setItem("object", JSON.stringify({ key: "value" }));

getItem 则是可以帮我们读取 SessionStorage 中的某笔资料：

const data = sessionStorage.getItem("object");
console.log(JSON.parse(data));

removeItem 则是删除某笔资料：

const data = sessionStorage.removeItem("object");

而 clear 会将 SessionStorage 中的所有资料都清除：

sessionStorage.clear();

不晓得今天认识了 SessionStorage 之後，各位有没有灵光一闪，突然觉得之前某些资料其实可以存在 SessionStorage 就好了呢？之後如果再有这种要在用户端储存资料的需求，大家就可以再多思考一下，选出符合情境的 Storage API 罗。