<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. 如何让alertdialog选择完后自动关闭

    builder.setIcon(R.drawable.ic_system) .setTitle("串口号") .setSingleChoiceItems(mPorts, mSele ...

  2. 机器学习规则:ML工程最佳实践----rules_of_ml section 2【翻译】

    作者:黄永刚 ML Phase II: 特征工程 第一阶段介绍了机器学习的一个周期,为学习系统获取训练数据,通过有趣的引导设计指标,创建一个服务框架.在有了一个完整系统之后,就进入了第一阶段. 第二阶 ...

  3. FLUME KAFKA SOURCE 和 SINK 使用同一个 TOPIC

    FLUME KAFKA SOURCE 和 SINK 使用同一个 TOPIC 最近做了一个事情,过滤下kakfa中的数据后,做这个就用到了flume,直接使用flume source 和 flume s ...

  4. CSS之基于不同场景的垂直居中解决方案

    元素的水平居中,如果是一个行内元素,就对它的父元素应用 “text-align:center”: 如果是一个块级元素,就对它自身应用“margin:auto”. 垂直居中的几种场景以及实现方法: 一. ...

  5. PostgreSQL Replication之第四章 设置异步复制（1）

    执行完您的第一个即时恢复(PITR,Point-In-Time-Recovery),我们准备在一个真正的复制设置上工作.在本章,您将学会如何设置异步复制和流.我们的目标是确保您可以实现更高的高可用和更 ...

  6. Spring Cloud学习笔记【四】断路器Hystrix

    雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因 “服务提供者” 的不可用导致 “服务消 ...

  7. COGS——T 8. 备用交换机

    http://www.cogs.pro/cogs/problem/problem.php?pid=8 ★★   输入文件:gd.in   输出文件:gd.out   简单对比时间限制:1 s   内存 ...

  8. WebKit载入流程 - 概述

    之前写了几篇载入流程的说明,是从下向上看,有点仅仅见树木不见森林的感觉.经过近期一段时间的学习,有了能加以概括抽象的方法. WebKit载入流程和页面组成是直接相关的,页面就是WebKit要载入的对象 ...

  9. Jsoncpp使用具体解释以及链接问题解决

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写. 同一时候也易于机器解析和生成. 它基于JavaScript Programming ...

  10. CKEditor高级编辑器

    是否感觉后台分类描写叙述信息.商品描写叙述信息以及文章描写叙述信息 编写时很的不方便?有时候会将word的格式也复制过来了?那这个插件就比較适合了. 本插件使用CKEditor最新版本号,复制过来的内 ...