<body>

    <div>

        <span>用户名</span>

        <input type="text" class='username'>

    </div>

    <div>

        <span>密码</span>

        <input type="password" class='password'>

    </div>

    <input type="checkbox" class='check'><button>登录</button>

</body>

<script>

    var text = document.getElementsByClassName('username')[0];

    var pas = document.getElementsByClassName('password')[0];

    var check = document.getElementsByClassName('check')[0];

    var button = document.getElementsByTagName('button')[0];

//    点击 登录按钮

    button.onclick = function (){

//        如果复选框选中的话，把username 和password 保存起来、

        if(check.checked){

            localStorage.setItem('username',text.value);

            localStorage.setItem('password',pas.value);

//            如果没有选中的话，就不保存

        }else{

            localStorage.clear();

        }

    }

//    当再次打开页面的时候 会获取页面的webstorage

    window.onload = function(){

        text.value = localStorage.getItem('username')

        pas.value = localStorage.getItem('password')

    }

</script>
setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

sessionStorage

　　容量大小约为5M左右,该方式的生命周期为关闭浏览器窗口为止

localStorage

　　容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期，但会应用户的请求而删除。

注意点:只能存储字符串，如果是json对象的话,可以将对象JSON.stringify() 编码后存储

js---- localStorage的基本用法的更多相关文章

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

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

  2. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  3. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  4. JQuery之append和appendTo的区别，还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  5. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  6. 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  7. js确认框confirm()用法实例详解

    先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...

  8. js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  9. 浅谈JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  10. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

随机推荐

  1. json数据字典，以及数据在下拉框中显示

    建立person_vocation.json数据字典文件,内容: [ {"id":1,"disabled":false,"selected" ...

  2. RecordAccumulator 1

    介绍 前面讲过producer会将数据保存在RecordAccumulator中,并通过Sender发送数据.RecordAccumulator 就相当于一个队列保存着那些准备发送到server的数据 ...

  3. ACM-ICPC 2017 Asia Urumqi（第八场）

    A. Coins Alice and Bob are playing a simple game. They line up a row of nnn identical coins, all wit ...

  4. Debian9.5 系统配置NFS配置说明

    NFS是Network File System的缩写,即网络文件系统.它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录.NFS客户端可以通过挂载(mount)的方式将NFS ...

  5. 洛谷 P2542 [AHOI2005]航线规划 树链剖分_线段树_时光倒流_离线

    Code: #include <map> #include <cstdio> #include <algorithm> #include <cstring&g ...

  6. LNMP安装部署开源IP管理工具phpipam

    1.数据库 mariadb 安装 //依赖安装 yum install -y apr* autoconf automake bison bzip2 bzip2* compat* \ cpp curl ...

  7. 开源映射平台Mapzen加入了Linux基金会的项目

    2019年1月29日,Linux基金会宣布,开源映射平台Mapzen现在是Linux基金会项目的一部分. Mapzen专注于地图显示的核心组件,如搜索和导航.它为开发人员提供了易于访问的开放软件和数据 ...

  8. Java基础学习总结（12）——一哈希编码HashCode

    一.哈希编码 现在是站在JAVA虚拟机的角度来看内存里面的布局,站在JAVA虚拟机的角度,在内存里面有好多好多个对象,这里用椭圆来代表一个个对象.一个程序运行起来的时候,可能会有很多个对象在内存里面分 ...

  9. CODEVS——T 2833 奇怪的梦境

    http://codevs.cn/problem/2833/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  10. JSR 303 - Bean Validation 简单介绍及用法

    一.JSR-303简单介绍 JSR-303 是 JAVA EE 6 中的一项子规范.叫做 Bean Validation,官方參考实现是Hibernate Validator. 此实现与 Hibern ...