将用户的输入保存至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. 【测试-测试心得】测试发现BUG后,怎么定位问题?

    一.判断前后端 Safari中可以右键,选择“检查元素”,再选择“网络”同样可以抓取到http请求,如图 怎么区分是前端错误还是后端错误? 1.在开发者工具中,如果console中有报错,则表示前端代 ...

  2. scrapy基础知识之 pycharm 调试小技巧:

    在项目根目录下新建main.py文件,用于调试 from scrapy.cmdline import executeexecute(["scrapy","crawl&qu ...

  3. React躬行记(7)——表单

    表单元素是一类拥有内部状态的元素,这些状态由其自身维护,通过这类元素可让用户与Web应用进行交互.HTML中的表单元素(例如<input>.<select>和<radio ...

  4. springboot+druid连接池及监控配置

    1. 问题描述 阿里巴巴的数据库连接池Druid在效率与稳定性都很高,被很多开发团队使用,并且自带的Druid监控也很好用,本章简单介绍下springboot+druid配置连接池及监控. 2. 解决 ...

  5. 微信小程序生成随机数

    const charts = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K', ...

  6. UVA816 Abbott的复仇 Abbott's Revenge

    以此纪念一道用四天时间完结的题 敲了好几次代码的出错点:(以下均为正确做法) memset初始化 真正的出发位置必须找出. 转换东西南北的数组要从0开始. bfs没有初始化第一个d 是否到达要在刚刚取 ...

  7. LiteDB源码解析系列(1)LiteDB介绍

    最近利用端午假期,我把LiteDB的源码仔细的阅读了一遍,酣畅淋漓,确实收获了不少.后面将编写一系列关于LteDB的文章分享给大家,希望这么好的源码不要被埋没. 1.LiteDB是什么 这是一个小型的 ...

  8. 机器学习-特征值,svd分解

    求矩阵的秩 设 ,已知r(A)=2,则参数x,y分别是 解:任意三阶子式=0,有二阶子式≠0,但是这些子式比较多,可以使用初等变换,因为初等变换不改变矩阵的秩,可以将矩阵通过初等行(列)变换,化为行阶 ...

  9. vue教程(三)-slot\keep-alive的使用

    一.slot其实就是填坑操作,父组件传递dom结构,是vue提供的一种内置组件(组件知识请查看上篇博客内容) 写法:<slot></slot> 例子: var child = ...

  10. c#六大设计原则(以仪器代码为例)

    [有格式的原文请到https://www.cnc6.cn/c六大设计原则/文末下载] 软件设计原则常见的有6大原则,分别为: ①单一职责原则: ②开闭原则: ③依赖倒置原则: ④里氏替换原则: ⑤接口 ...