将用户的输入保存至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. pod lib create ObjcName 时候报错error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54

    众所周知 pod lib create ObjcName 需要从git 上边克隆模版 :https://github.com/CocoaPods/pod-template.git 然后有时候会很慢报错 ...

  2. 解决 Prometheus 不能获取 Kubernetes 集群上 Windows 节点的 Metrics

    背景 接上一篇 快速搭建 Windows Kubernetes , 我们发现原来在 Windows Kubernetes 会有一些与在 Linux 上使用不一样的体验,俗称坑,例如 hostAlias ...

  3. leetcode的Hot100系列--3. 无重复字符的最长子串--滑动窗口

    可以先想下这两个问题: 1.怎样使用滑动窗口? 2.如何快速的解决字符查重问题? 滑动窗口 可以想象一下有两个指针,一个叫begin,一个叫now 这两个指针就指定了当前正在比较无重复的字符串,当再往 ...

  4. MyBatis从入门到精通:select用法进一步讲解

    selectAll:笔记 /* 定义接口方法的返回值的时候,必须注意查询SQL可能返回的结果数量.当 返回值最多只有一个结果的时候,可以将结果返回值定义为SysUser,此时 返回值类型为List&l ...

  5. Spring Cloud Alibaba | Sentinel: 服务限流基础篇

    目录 Spring Cloud Alibaba | Sentinel: 服务限流基础篇 1. 简介 2. 定义资源 2.1 主流框架的默认适配 2.2 抛出异常的方式定义资源 2.3 返回布尔值方式定 ...

  6. 【基础算法-模拟-例题-玩具谜题】-C++

    原题链接P1563 玩具谜题 这道题依然是一道模拟题目,就简单讲讲坑点: 1.有些时候在转圈的时候要用到它们站成了一个环的性质! 2.小人面朝的方向影响了它们左右的方向! 3.注意考虑顺时针逆时针与小 ...

  7. 【拓扑排序】威虎山上的分配-C++

    威虎山上的分配 描述 每年过年的时候,座山雕都会给兄弟们分银子,分银子之前,座山雕允许大伙儿发表意见,因为要是没法满足所有人的意见,指不定谁要搞出什么大新闻.不过每个人在提意见的时候只能说:" ...

  8. requests模块:请求网页

    请求网页时需要设置对应的headers(请求头) import requests link = 'https://movie.douban.com' headers = {'User-Agent': ...

  9. Docker笔记(六):容器管理

    原文地址:http://blog.jboost.cn/2019/07/21/docker-6.html 容器是Docker中的另一核心概念,在Docker中,应用的运行都是在容器内进行的,容器则基于镜 ...

  10. 个人永久性免费-Excel催化剂功能第57波-一键生成完全组合的笛卡尔积结果表

    在数据库的多表查询中,通常会有各种连接关系,同样地在Excel环境中,也有很大的场景需要用到类似数据库的多表查询,如经典的VLOOKUP就是其中一种类似LEFT JOIN查询的查询效果.在很多时候需要 ...