将用户的输入保存至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. Thinkphp5.0之异常处理

    1.默认异常处理在调试模式下,系统默认展示的错误页面:请输入图片描述 异常处理接管 1.修改config.php 'app_debug' => false,2.在配置文件里添加如下代码 // 异 ...

  2. GIT \ SVN 版本管理 git + gitHub

    场景1   想删除一个段落,又怕将来想恢复找不回来怎么办?有办法,先把当前文件"另存为--"一个新的Word文件,再接着改,改到一定程度,再"另存为--"一个新 ...

  3. CentOS 网络互通情况下把一个Linux服务器的文件发送到另一个服务器

    scp -r  文件名/目录名 root@192.168.2.144:/home/hsw -r   发送目录使用,表示把该目录下的所有子目录以及文件发送过去

  4. 机器学习读书笔记(五)AdaBoost

    一.Boosting算法 .Boosting算法是一种把若干个分类器整合为一个分类器的方法,在boosting算法产生之前,还出现过两种比较重要的将多个分类器整合为一个分类器的方法,即boostrap ...

  5. 数据结构与算法---树结构(Tree structure)

    为什么需要树这种数据结构 数组存储方式的分析 优点:通过下标方式访问元素,速度快.对于有序数组,还可使用二分查找提高检索速度. 缺点:如果要检索具体某个值,或者插入值(按一定顺序)会整体移动,效率较低 ...

  6. POJ 2449:Remmarguts' Date(A* + SPFA)

    题目链接 题意 给出n个点m条有向边,源点s,汇点t,k.问s到t的第k短路的路径长度是多少,不存在输出-1. 思路 A*算法是启发式搜索,通过一个估价函数 f(p) = g(p) + h(p) ,其 ...

  7. PAT L3-002: 堆栈(线段树)

    https://www.patest.cn/contests/gplt/L3-002 题意:中文题意. 思路:因为所有数<=1e5,权值线段树维护每个数出现多少次,然后每次出栈入栈都更新权值就好 ...

  8. django基础知识之URLconf:

    URLconf 在settings.py文件中通过ROOT_URLCONF指定根级url的配置 urlpatterns是一个url()实例的列表 一个url()对象包括: 正则表达式 视图函数 名称n ...

  9. STM32F072从零配置工程-串口USART配置

    也是使用HAL库进行配置,通过STMCube生成代码,可以通过这个简单的配置过程看到STMCube生成代码的一种规范: 从main函数入手观察其外设配置结构: 首先是HAL_Init()进行所有外设的 ...

  10. 预学第三天:Ge常用t快捷键,码云,Git使用

    目录 Get常用快捷键 码云及Git的使用 Get常用快捷键 git init #创建一个本地的仓库 **gie add test.txt #指定文件添加 ***git add . #当前文件夹下所有 ...