Web Storage和cookie的区别

Web Storage：本地存储和会话存储（在客户端存储数据）
本地存储
$('set').onclick = function() {
 
        //获取文本的值
        var textValue = $('text').value;
 
        //h5的属性localStorage,先进行是否支持h5 localStorage该属性，若支持，在执行
         if(window.localStorage) {
           //调用setItem方法，来进行键值对的设置
           localStorage.setItem("item1", textValue);
        }
      } localStorage.setItem("item1", textValue);
 
//读取数据，显示在div中
      $('get').onclick=function(){
        if (window.localStorage) {
           $('div').innerHTML=localStorage.getItem('item1');
        }
      }
临时会话存储
只需要将上面本地存储的localStorage改为sessionStorage即可
注意：window.sessionStorage
   两个方法：设置和获取
sessionStorage.setItem(“key名称”，value)；  
   sessionStorage.getItem(“key名称”，value)；
总结：本地存储与临时会话存储的区别：
  ● 本地存储：长久存储，没有时间限制的数据存储
  ● 临时会话存储：短暂存储，存储时间为数据保存开始到本次页面关闭
Web storage与cookie的区别：
  ● Cookie：最大存储容量为4k，不适合大量数据的存储
  ● 本地存储和临时会话存储：最大存储量为5M
  ● Web storage是cookie的升级版
本地存储与临时会话存储 ：存储形式：key-value
注意：key不可以重复，重复的话，新的记录会覆盖旧的记录