// 将用户的输入保存至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
相关推荐
html 5 localStorage本地存储
1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...
本篇文章主要介绍了HTML5 LocalStorage 本地存储 ,HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。有兴趣的可以了解一下。
主要介绍了HTML5 LocalStorage 本地存储,给标签元素添加属性和浏览器兼容性都做了详细概括,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
html5开发
HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储
localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。 在JavaScript语言中可通过 window.localStorage 或 localStorage 调用此对象。 特点 1) 同源策略限制。若想在...
我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储。 1、localStorage.name=老王; //第一种设置存储本地数据的方法localStorage 2、localStorage.setItem(color,red); //第二种设置存储本地数据...
html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比的优势。webstrange又分为:localstorage,...
使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,...
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...
html5开发
本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能。分享给大家供大家参考,具体如下: 源码引用的js、jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head...