HTML5 Web存储-localStorage and sessionStorage

先来简单复习一下HTML4中的cookie：

  cookie存储数据到用户设备上，存储的数据量较小只有4KB
  可以通过navigator.cookieEnabled检测是否开启了cookie

• 设置cookie document.cookie = 'key=value';
• 获取cookie document.cookie;
• 删除cookie document.cookie = "key=value;max-age=0";
• 设置max-age存储期限 document.cookie = "key=value;max-age=1000"; // 1000秒
• 设置expires存储期限

      var timestamp = (new Date()).getTime() + 10000;
      var expires = new Date(timestamp).toGMTString();//或toUTCString
      document.cookie = "key=value;expires="+expires;

• 获取具体cookie值

      function getCookie(name) {
        var name = name + "=";
        var ary = document.cookie.split(';');
        for(var i = 0; i < ary.length; i++){
            var c = ary[i];
            while (c.charAt(0) == ' '){
              c = c.substring(1);
            }
            if (c.indexOf(name) != -1){
              return c.substring(name.length, c.length);
            }
        }
        return "";
      }

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储，一般可存放5MB左右数据；
• sessionStorage - 针对一个 session 的数据存储，关闭窗口后数据就被删除，可存放5MB左右数据；

localStorage 方法

localStorage是以key-value形式保存数据的，key和value都为字符串格式

普通的字符正常存储就可以了

对象数据可以利用JSON.stringify()将其转换为字符串格式

使用的时候再用JSON.parse()转换回对象格式

(如果直接存储对象的话，它会被强制转换为字符串 “[object Object]”)

    var storage = null;
    if(window.localStorage){            //判断浏览器是否支持localStorage
      storage = window.localStorage;
      storage.setItem("name","Mary");   //调用setItem方法，存储数据
      alert(storage.getItem("name"));   //调用getItem方法，读取数据
      storage.removeItem("name");  //调用removeItem方法，删除数据(如果不删除，数据就会一直存在浏览器中)
    }

 

localStorage和sessionStorage提供了简单的API (API都是相同的)，类似于一个客户端的数据库

常用的有以下几个：

• 保存数据 setItem(key,value)
• 读取数据 getItem(key)
• 删除单个数据 removeItem(key)
• 清空全部数据 clearItem()
• 获取数据索引 key(index)

sessionStorage 方法

sessionStorage基本的判断和使用方法和localStorage的使用是一致的

最后说说Html5的Web Storage和Html4的cookie的区别

特点	Cookie	Web Storage
生命周期	一般由服务器生成并设置时间；浏览器生成默认关闭浏览器失效	local：不清除则永久保存；session：关闭页面或浏览器失效
数据大小	4kb	推荐5MB
通信	携带在HTTP头中（过多使用会造成性能问题）	仅在浏览器存储，不存在通信
使用	原生接口不友好，需要手动封装	原生接口友好

参考文章：HTML5客户端数据存储Web Storage-localStorage与sessionStorage