将用户的输入保存至localStorage对象的属性中,这些属性在再次访问时还会继续保持在原位置。

如果你在浏览器中按照fil://URL的方式直接打开本地文件,则文法在某些浏览器中使用存储功能(比如FireFox)

而通过HTTP打开文件是可行的。

将用户的输入数据保存下来,这样在下次访问时也能取到数据

  function save(a, b, c, d) {
if (window.localStorage) {//只有在浏览器支持的时候才运行这里的代码
localStorage.loan_a = a;
localStorage.loan_b = b;
localStorage.loan_c = c;
localStorage.loan_d = d;
}
}

保存到localStorage

在文档首次加载时,将会尝试还原输入字段

         window.onload = function () {
//如果浏览器支持本地储存并且上次保存的值是存在的
if (window.localStorage && localStorage.loan_a) {
document.getElementById("a").value = localStorage.loan_a;
document.getElementById("b").value = localStorage.loan_b;
document.getElementById("c").value = localStorage.loan_c;
document.getElementById("d").value = localStorage.loan_d;
}
}

首次加载还原数据

 

保存localStorage并访问的更多相关文章

  1. JS --- 本地保存localStorage、sessionStorage用法总结

    JS的本地保存localStorage.sessionStorage用法总结 localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握localS ...

  2. JS的本地保存localStorage、sessionStorage用法总结

    localStorage 生命周期是永久的  这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage 生命周期为当前窗口或标签 ...

  3. localStorage保存账号密码

    首先是判断浏览器是否支持这一属性,他是HTML5里的属性: if(window.localStorage){ alert('支持');}else{ alert('不支持');} localStorag ...

  4. 利用localStorage实现对ueditor编辑内容定时保存为草稿

    直接看代码吧 1.引入ueditor和ueditor的使用我就不细说了 详情请戳http://blog.csdn.net/wangdianyong/article/details/39780709 2 ...

  5. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  6. 《前端之路》之 Cookie && localStorage && Session Storage 缓存相关

    08: Cookie && localStorage && Session Storage 缓存相关 客户端.前端 存储 一. 起 因 首先解释下为什么想来写这个关于前 ...

  7. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  8. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  9. HTML5 localStorage与document.domain设置问题

    localStorage的写入和读取,不能跨子域,否则在一些移动端浏览器上,会出现读取不到的情况. 最近开发一个移动端的播放记录功能,在pc端和android版的chrome测试很顺利通过了,但后来进 ...

随机推荐

  1. Python之matplotlib库学习:实现数据可视化

    1. 安装和文档 pip install matplotlib 官方文档 为了方便显示图像,还使用了ipython qtconsole方便显示.具体怎么弄网上搜一下就很多教程了. pyplot模块是提 ...

  2. Git 的一些使用细枝末节

    新入职XX公司第一天, 使用旧同事的电脑 Step1: 在Android Studio 中配置帐号 $ git config --global user.name author #将用户名设为auth ...

  3. 谈谈 c# 对象初始化问题

    C#对象初始化 之前在学习过程中只是知道该如何初始化对象,但是却不明白为何要这么做,不这么做有什么问题. 现在就针对我最近遇到的问题(定义了全局字节数组没有初始化,然后在多线程里头使用,然后就一直报n ...

  4. 前端动画 wow.js 效果

    让花里胡哨的特效变简单 wow.js动画class介绍 引入css样式以及js插件 <link rel="stylesheet" type="text/css&qu ...

  5. Bzoj 3126[Usaco2013 Open]Photo 题解

    3126: [Usaco2013 Open]Photo Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 335  Solved: 169[Submit] ...

  6. kali linux 常用文件与指令路径

    重启网络 : /etc/init.d/networking restart 语言设置文件 : /etc/default/locale apt 安装deb保存目录 : /var/cache/apt/ar ...

  7. Windows下ElasticSearch的Head安装及基本使用

    前段时间,有一朋友咨询我,说es的head插件一直安装失败,为了给朋友解惑,自己百度博文并实践了一番,也的确踩了些坑,但我给爬了起来.今天就来分享下实践心得并跳过的坑. ElasticSearch 是 ...

  8. 关于ftp响应码的分析【转载】

    转载地址: http://www.jb51.net/article/26649.htm 1开头-成功 2开头-成功 3开头-权限问题 4开头-文件问题 5开头-服务器问题 150 FILE: %s 1 ...

  9. 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)

    1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...

  10. LiteDB源码解析系列(2)数据库页详解

    在这一篇里,我将用图文的方式展示LiteDB中页的结构及作用,内容都是原创,在描述的过程中有不准确的地方烦请指出. 1.LiteDB页的技术工作原理 LiteDB虽然是单个文件类型的数据库,但是数据库 ...