<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. jquery实现上下浮动

    jquery实现上下浮动: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. 监控rman备份

    1.服务会话关联通道设置 set COMMAND ID 命令 2.查询V$PROCESS和V$SESSION 决定会话对应的RMAN的通道 3.查询V$session_LONGGOPS监控备份集和复制 ...

  3. SSL和SSH

    简单的来说:SSL是安全传输的一种安全协议,SSH只是在传输的时候为了防止"中间人"篡改数据而提供的安全的"通道" 在使用的时候我们只关心传输数据的安全性,那么 ...

  4. dd---复制文件并对原文件的内容进行转换和格式化处理

    dd命令用于复制文件并对原文件的内容进行转换和格式化处理.dd命令功能很强大的,对于一些比较底层的问题,使用dd命令往往可以得到出人意料的效果.用的比较多的还是用dd来备份裸设备.但是不推荐,如果需要 ...

  5. 【J-meter】正则表达式提取

    当获取的值中含有折行,可采用下面的办法解决:

  6. 全面解读Java中的枚举类型enum的使用

    这篇文章主要介绍了Java中的枚举类型enum的使用,开始之前先讲解了枚举的用处,然后还举了枚举在操作数据库时的实例,需要的朋友可以参考下 关于枚举 大多数地方写的枚举都是给一个枚举然后例子就开始sw ...

  7. 安装Orcacle后使用DBCA(Database Configuration Assistant)卡住的问题

    转自:http://hi.baidu.com/kissbaofish/item/2f56d326742c39454799620b 用dbca建库停在46% 是export NLS_LANG='amer ...

  8. android数据储存之存储方式

    能够将数据储存在内置或可移动存储,数据库,网络.sharedpreference. android能够使用Content provider来使你的私有数据暴漏给其它应用程序. 一.sharedpref ...

  9. FZOJ 2176 easy problem ( 树链剖分 )

    pid=2176" target="_blank">题目链接~~> 做题感悟:感觉做多了树链剖分的题目,有很多是树链剖分 + 想法.. 解题思路: 这题非常明 ...

  10. 学习中 常用到的string内置对象方法的总结

    //concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. var str = "Hello"; var out = str.concat(" Wor ...