HTML5 LocalStorage 本地存储

HTML混合APP开发 2014-11-16

// 将用户的输入保存至localStorage对象的属性中
// 这些属性在再次访问时还会继续保持在原位置
// 如果你在浏览器中按照file://URL 的方式直接打开本地文件,
//则无法在某些浏览器中使用存储功能(比如FireFox)
// 而通过HTTP打开的文件是可行的
function save(amount, apr, years, zipcode) {
    if (window.localStorage) {  // 只有在浏览器支持的时候才运行这里的代码
        localStorage.loan_amount = amount;
        localStorage.loan_apr = apr;
        localStorage.loan_years = years;
        localStorage.loan_zipcode = zipcode;
    }
}
// 在文档首次加载时,将会尝试还原输入字段
window.onload = function() {
    // 如果浏览器支持本地存储并且上次保存的值是存在的
    if (window.localStorage && localStorage.loan_amount) {  
        document.getElementById("amount").value = localStorage.loan_amount;
        document.getElementById("apr").value = localStorage.loan_apr;
        document.getElementById("years").value = localStorage.loan_years;
        document.getElementById("zipcode").value = localStorage.loan_zipcode;
    }
};

//设置、读取、删除的相关方法
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "AA";//设置a为"AA",覆盖上面的值
localStorage.setItem("b", "BB");//设置b为"BB"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
//推荐使用getItem()和setItem(),清除键值对使用removeItem()。清除所有的键值对,可以使用clear()。

//HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:
var storage = window.localStorage;
function showStorage() {
	for (var i = 0; i < storage.length; i++) {
		//key(i)获得相应的键,再用getItem()方法获得对应的值
		document.write(storage.key(i) + " : " + storage.getItem(storage.key(i)) + "<br>");
	}
}



浏览器支持情况如下:
HTML5 LocalStorage 本地存储

http://www.hejingzong.cn/blog/ViewBlog_57.aspx

相关推荐