使用HTML5本地储存localStorage

数据储存

项目中有个需求，在textarea中输入邮箱，多个邮箱之间用分号；分隔，为了用户方便，需要将用户输入过的邮箱储存起来，下次使用的时候直接点击选择就可以自动写入相应的邮箱。对于

<input type="text"/>

来说 浏览器会自动储存已经写过的内容，但是textarea却不行，这里就需要我们自己来写。

储存方式的选择：

本来想使用Cookies，但是发现HTML5有更好的本地储存方式：localStorage

与Cookies相比，localStorage优点是容量大：Cookies最多能储存大约4kb的数据，但是localStroage支持5MB的容量，大了不止一点点。第二，localStorage没有过期时间，即使一年以后仍然可以使用；而Cookies有。另外，Cookies的内容会随着页面请求一同发往服务器，速度慢效率低。缺点在于localStorage的兼容性不如Cookies，但是也支持IE8+以及其他主流浏览器，对于我们的项目来说是足够的，所以最终选择它来实现功能。

最后提醒一点：不论是Cookies还是localStorage，安全性都不怎么样，不建议用它储存敏感信息。

localStorage的使用方式：

提示：localStorage储存的值都是字符串类型，使用时要注意。另外，可以在浏览器调试器中的Resources的localStorage中看到储存的信息。

W3School中有清晰的介绍，localStorage本身的使用也很简单方便，使用方式如下：

//存储信息   （存储的信息名称，要存储的字符串）
localStorage.setItem("CC_email_list",input_eamil[i])
//读取信息   （要读取的信息名称）
localStorage.getItem("CC_email_list")
//清除信息    （要清除的信息名称）
localStorage.removeItem("CC_email_list");

配合js的dom操作，可以很轻松的取出textarea输入的值，去除空格回车，校验email格式，正确就储存，否则报错。

同时，页面load之后，若数据存在则读取数据，用；分号分隔变为数组，排序，js生成带email的标签，插入到需要的节点中，给标签依次绑定click函数，点击之后取得textarea的值，加上标签中的值，再重新放入textarea。

通过上述思路，就可以简单的实现textarea的储存功能，一些经常需要输入多个邮箱地址的表单，使用这个方法，可以极大提升用户的输入效率，优化体验。

sessionStorage

另外，还有一个sessionStorage 方法，它是针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。他跟上边的localStorage有区别，在使用的时候可以根据需求，选择使用。

页面之间通信

最近发现一个localStorage的新用法：做页面之间的交互。遇到一个需求是，由A页面跳转至B页面，在B页面选择套餐数据，提交之后的数据要在A页面进行更新，这就涉及到两个页面之间的数据交换。经过一番搜索了解，发现使用localStorage即可非常简单的实现这个需求：

使用A页面打开B页面之后，在B页面提交时，存储一个localStorage，然后只要在A页面设置一个监听，即可监听这个localStorage的数据和变化。非常方便。

简单的代码如下：

A页面，监听。注意这里只有hehe这个本地储存的字符串变化了之后，才会触发事件。

$(window).on('storage',function () {
console.log(localStorage.getItem('hehe'));
});

B页面，创建和修改

function setLocalStorage(){
var str = Math.random();   //为了每次都能触发事件，给他一个random
localStorage.setItem('hehe',str);
}

另外，HTML5还有postMessage和sendMessage方法，也可以实现页面间和跨域的通信。但是在这个场景下，实现起来复杂一些，以后再做介绍。