sessionStorage与localStorage的区别

HTML5 的 DOM Storage 机制提供了一种方式让程序员能够把信息存储到本地的计算机上，在需要时获取。这点和 cookie 相似，区别是 DOM Storage 提供了更大容量的存储空间。以前在客户端保存数据使用最多的是 cookie，但 cookie 的大小上限为 4KB，虽然sessionStorage和localStorage也有限制，但是比cookie大的多，并且每次请求一个新页面时 cookie 都会被发送过去，无形中浪费带宽。
在项目中不同组件需要相同的一些数据，通过路由传来传去，还得在不同路由中需要定义参数进行接收，无疑在不同组件中定义了很多变量，若是放在全局，并不能清除掉，无疑浪费资源。可以通过Storage机制存在客户端，不同路由就直接取即可，那么需要考虑使用两种对象使用哪一种。

（1）区别

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的。通过以上的不同点，在本项目中使用session来进行存取，只在一次会话中进行存取。

（2）存取方法

sessionStorage.setItem("key", "value"); 	localStorage.setItem("key", "value");
sessionStorage.getItem("key", "value"); 	localStorage.getItem("key", "value");

（3）保存在 Storage 对象的数据类型

当使用 DOM Storage 进行本地存储时，任何数据格式在 Storage 对象中都以字符串类型保存，所以如果保存的数据不是字符串，在读取的时候需要自己进行类型的转换。这里我们使用 JSON 将对象序列化之后再存储。
在项目中其中有一个对象需要存入到缓存中：

sessionStorage.setItem('textarea', this.textarea)

This.textarea是我在组件中定义的一个对象，但是在 Storage 对象中都以字符串类型保存，所以在Application中查看的时候是这样的：

所以在存session的时候需要进行转换，如下：

sessionStorage.setItem('textarea', JSON.stringify(this.textarea))

现在存的session是一个字符串了，所以在取出session值得时候依然需要转换，转换成原来的数据类型格式，如下：

JSON.parse() 函数会把 JSON 对象转换为原来的数据类型。