sessionStorage、localStorage用法总结

在工作中使用sessionStorage存储数据时，发现sessionStorage无法直接存储数组和对象，如存入对象则显示为"[object Object]"，对此作下记录，重新温习sessionStorage和localStorage

html5 中的 web Storage 包括了两种存储方式：sessionStorage 和 localStorage

共同点

存储大小为5MB，都保存在客户端，不与服务器进行交互通信，有相同的Web API

sessionStorage、localStorage区别

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期，sessionStorage 存储的数据的生命周期是一个会话，而 localStorage存储的数据的生命周期是永久，除非主动删除数据，否则永远不会过期

Web Storage API

localStorage 和 sessionStorage 有着统一的API接口，下面以sessionStorage为例介绍一下 API 接口使用方法

添加键值对

setItem(key,value)：为指定key值设置一个对应的value值

除了使用setItem方法，还可以使用sessionStorage.key = value或者sessionStorage[‘key’] = value这两种形式。

// 把name值存储到name的键上
sessionStorage.setItem('name', 'jacky'); // 法1 
// sessionStorage.name = 'jacky'; // 法2 
// sessionStorage['name'] = 'jacky'; // 法3 

添加数组和对象

需要注意的是key和value值必须是