缓存

H4
一、Cookie

  (1)
　　document.cookie="userId=828";
　　document.cookie="userId=828; userName=hulk";
　　escape()
　　unescape()
  (2)
　　document.cookie

  (3)
　　document.cookie="userId=828; expires=GMT_String";

　　① 保存用户登录状态
　　② 跟踪用户行为
　　③ 定制页面

　　④

　　  最大为 4096 字节的 Cookie
　　  每个站点存储 20 个 Cookie
　　  总站点300 个 Cookie
　　  Cookie默认情况都会随着Http请求发送到后台服务器

 

 

var exp = new Date();
exp.setTime(exp.getTime() + 1000 * 60 * 60 * 24 * 0.5); //这里表示保存24小时
document.cookie = "music_identify=" + true + ";expires=" + exp.toGMTString();

function getCookie(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (arr[0] == name)
return arr[1];
}
return "";
}

 

H5

  localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
  sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了

二、本地存储(1.5MB以上   | 无尽河流，飞机大战)

（1）下面的代码片段访问当前域名下的本地 Storage 对象，并增加了一个数据项通过使用Storage.setItem()。
　　localStorage.setItem(`myCat`, `Tom`);
（2）该语法用于读取 localStorage 项，如下:
　　localStorage.getItem(`myCat`);
（3）该语法用于移除 localStorage 项，如下:
　　localStorage.removeItem(`myCat`);
（4）该语法用于移除所有的 localStorage 项，如下:
　　// 移除所有
　　localStorage.clear();

localStorage['fishinglegendHighScore']   = 10/1000/9999

　　存储大小限制测试及异常处理
　　不同浏览器对 HTML5 的本地存储大小基本均有限制，一个测试的结果如下
　　IE 9 > 4999995 + 5 = 5000000
　　firefox 22.0 > 5242875 + 5 = 5242880
　　chrome 28.0 > 2621435 + 5 = 2621440
　　safari 5.1 > 2621435 + 5 = 2621440
　　opera 12.15 > 5M （超出则会弹出允许请求更多空间的对话框）
　　数据存储异常处理
　　try{
　　localStorage.setItem(key,value);
　　}catch(oException){
　　if(oException.name == 'QuotaExceededError'){
　　console.log('超出本地存储限额！');
　　//如果历史信息不重要了，可清空后再设置
　　localStorage.clear();
　　localStorage.setItem(key,value);
　　} }

三、sessionStorage

sessionStorage的操作方法基本与localStorage一致。
（1）sessionStorage.setItem(key,value)：添加本地存储数据。

（2）sessionStorage.getItem(key)：通过key获取相应的Value。

（3）sessionStorage.removeItem(key)：通过key删除本地数据。

（4）sessionStorage.clear()：清空数据。

(function() {
    if(!window.localStorage) {
        console.log('当前浏览器不支持localStorage!')
    }    
    var test = '0123456789';
    var add = function(num) {
        num += num;
        if(num.length == 10240) {
            test = num;
            return;
        }
        add(num);
    }
    add(test);
    var sum = test;
    var show = setInterval(function(){
        sum += test;
        try {
            window.localStorage.removeItem('test');
            window.localStorage.setItem('test', sum);
            console.log(sum.length / 1024 + 'KB');
        } catch(e) {
            alert(sum.length / 1024 + 'KB超出最大限制');
            clearInterval(show);
        }
    }, 0.1)
})()

四、webSql(本地数据库)