在HTML5中，除了CANVAS元素，另外一个新增的非常重要功能就是可以在本地客户端储存数据的WebStorage功能。

在HTML4我们是使用的cookies在客户端保存用户名等等一些简单的用户信息

Cookies的缺点：

1）         大小显示在4KB；

2）         宽带浪费

3）         难以操作

为了解决这样的一些问题，在HTML5中重新提供了在客户端保存数据的功能，他就是我们“WebStorage”。

1，         sessionStorage临时保存

就是把数据保存在session对象之中。

Session就是打开网站到关闭网站之间要求进行保存的数据。

SessionStorage

临时保存的用法：

SessionStorage.setItem(‘key’,’value’);

//或者是sessionStorage.KEY=’value’;

临时数据读取的方法：

变量=sessionStorage.getItem(‘key’);

//或者是sessionStorage.key

function saveStorage(id){
  var target = document.getElementById(id);
  var str = target.value;
  sessionStorage.setItem(‘mess’,str);
}
Function loadStorage(id){
  var target = document.getElementById(id);
  var msg = sessionStorage.getItem(‘mess’);
  varget.innerHTML = msg;
}

2，         localStorage永久保存

就是将数据保存在客户端本地的硬件设备至上面，如果浏览器被关闭，这个数据不会丢失，下次打开可以继续使用。这个功能就是我们的localStorage永久保存功能。

localStorage

永久保存数据的方法：

localStorage.setItem(‘key’,’value’);

//或者

localstorage.key

读取的方法：

变量=localStorage.getItem(‘key’);

//或者

变量=localStorage.key

function saveStorage(id){
  var target = document.getElementById(id);
  var str = target.value;
  localStorage.setItem(‘mess’,str);
}
Function loadStorage(id){
  var target = document.getElementById(id);
  var msg = localStorage.getItem(‘mess’);
  varget.innerHTML = msg;
}