在工作中使用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值必须是