<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. Java hashCode(), equals()

    转自:http://blog.csdn.net/fenglibing/article/details/8905007冯立彬的博客 以下是关于HashCode的官方文档定义: hashcode方法返回该 ...

  2. 关于H5中 input消除默认，取消在手机上的点击高亮效果

    input消除默认,代码如下    input{             -webkit-tap-highlight-color: rgba(255, 255, 255, 0);            ...

  3. Embedding Flash Fullscreen in the Browser Window

    For Developers‎ > ‎Design Documents‎ > ‎ Embedding Flash Fullscreen in the Browser Window Auth ...

  4. vue分页组件火狐中出现样式问题

    分页的操作到了火狐浏览器会样式 怎么解决? 其实就是将input的type属性变成了text,因为number属性会变成上下的小箭头

  5. 端口扫描软件Nmap使用一（下载于安装）

    端口扫描软件Nmap使用一(下载于安装) Nmap的下载地址虽然很多,但是对于新手来说,尽量在官方网址下载,某些第三方下载网址很不人道,使用他们加速器的时候会绑定下载很多垃圾软件,会给我们造成很多不必 ...

  6. spring mvc 防止重复提交表单的两种方法，推荐第二种

    第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...

  7. zookeeper 性能测试

    zookeeper压力测试:性能对比(3个节点,5个节点,7个节点 创建节点.删除节点.设置节点数据.读取节点数据性能及并发性能) 测试结果如下: 五次测试三节点结果: 创建100W节点用时:15.0 ...

  8. 软件project总结

    软件project的文档完结了.在这里面学到了好多东西.也通过它分析了对机房收费系统进行了更加具体的分析.尽管早就明确了之间的联系,可是越温习越体会到逻辑的重要性和全心全意为人民服务的精神. 这些文档 ...

  9. 新一代企业即时通信系统 -- 傲瑞通（OrayTalk）

    傲瑞通(OrayTalk)是我们为企业专门打造的新一代企业即时通讯平台,功能强大丰富.像组织结构.文字/语音/视频会话.文件传送.远程协助.消息记录等功能都有,而且留有接口可与企业遗留系统进行集成. ...

  10. android selector设置button点击效果（具体）以及常见问题

    button的点击效果学习起来其实比較easy,此点对开发人员来说也是使用的比較频繁的一个知识点,与它相关的还有编辑框的获取焦点时改变背景颜色.选择button选择时改变字体颜色等等.这些其实都是用到 ...