`
xylw
  • 浏览: 60118 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
文章分类
社区版块
存档分类
最新评论

HTML5 LocalStorage 本地存储

阅读更多

 

// 将用户的输入保存至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>");
	}
}



浏览器支持情况如下:

 

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

 

分享到:
评论

相关推荐

    基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip

    这个"基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip"提供了一个经过优化的JavaScript组件,旨在使localStorage的使用更加方便和通用。 localStorage主要提供了两个方法:`setItem`和`...

    HTML5 LocalStorage 本地存储刷新值还在

    1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...

    HTML5 LocalStorage 本地存储详细概括(多图)

    HTML5 LocalStorage 本地存储是Web开发中一种用于持久化数据的重要特性,它允许开发者在用户的浏览器中存储大量数据,而这些数据不会随着浏览器会话的结束而消失。相比于早期的Cookie技术,LocalStorage提供了更大的...

    HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储

    HTML5的LocalStorage和UserData是两种不同的机制,它们都允许网页在用户本地存储数据,从而实现离线应用或者增强用户体验。这两个技术在实现浏览器兼容性方面起着关键作用,特别是对于那些需要在用户关闭浏览器后...

    前端经典——localstorage本地存储demo.rar

    5. **示例中的"localstorage本地存储demo"**: 这个示例可能包含一个简单的网页,演示了如何使用Local Storage来保存和读取数据。开发者可以通过查看代码了解如何在JavaScript中操作Local Storage,例如添加数据、...

    html5 localStorage本地存储_动力节点Java学院整理

    HTML5的`localStorage`是Web应用程序用来在用户浏览器上持久化存储数据的一种机制。相比于`sessionStorage`,`localStorage`的主要特点是数据不会随页面关闭而消失,也没有过期时间,除非用户手动清除。这个功能使得...

    html5中localStorage本地存储的简单使用

    我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储。 1、localStorage.name=老王; //第一种设置存储本地数据的方法localStorage 2、localStorage.setItem(color,red); //第二种设置存储本地数据...

    基于html5的localstorage的本地存储数据库.zip

    本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的本地存储数据库,这对于创建离线应用、提升用户体验以及在用户浏览器中保存数据具有重要意义。...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    HTML5的Web Storage技术是网页应用中数据存储的重要方式,相较于传统的Cookie,它提供了更高效、更大容量的本地存储能力。Web Storage分为两种类型:localStorage和sessionStorage。 1. localStorage: ...

    LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统

    LocalStorage是浏览器提供的本地存储机制,允许Web应用程序在客户端存储键值对数据。在学生管理系统中,LocalStorage用于保存学生数据,即使用户关闭浏览器,数据也能保留。当用户添加、修改或删除学生信息时,可以...

    HTML本地存储实例

    HTML本地存储,特别是HTML5中的localStorage和Web数据库(Database)技术,是现代Web应用中用于在客户端存储数据的重要工具。这些技术使得开发者可以将部分数据存储在用户的浏览器中,从而提高应用程序的性能,减少...

    HTML5 本地存储 LocalStorage详解

    HTML5的本地存储机制,尤其是LocalStorage,是现代Web开发中不可或缺的一部分,它允许开发者在用户的浏览器上持久化地存储数据,而无需借助于Cookie或Flash等传统方式。LocalStorage的引入,解决了早期存储技术如...

Global site tag (gtag.js) - Google Analytics