<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. 减少XML文件数

    在android开发中,做出漂亮的ui的应用,往往有数量庞大的xml文件.比如,我们要给一个Button加上一个selector,如果背景不是图片,就得写三个xml文件,分别是:edit_focuse ...

  2. jQuery的效果函数

    jQuery的效果函数有很多,下面让我们一起看看jQuery的效果函数吧: jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除 ...

  3. core组件进阶

    访问图像像素 存储方式 BGR连续存储有助于提升图像扫描速度. isContinuous()判断是否是连续存储. 颜色空间缩减 仅用这些颜色中具有代表性的很小的部分,就足以达到同样的效果. 将现有颜色 ...

  4. 紫书 例题 10-6 UVa 1635 （二项式定理+唯一分解定理）

    首先可以发现按照题目的算法最后得出来是一个杨辉三角 如果ai的系数是m的倍数,那么i即为答案 因为这个系数可能很大,而我们只需要判断倍数 所以我们就把m分解质因数,然后判断每一个系数 的质因数的幂是不 ...

  5. #ifdef__cplusplus

    百度知道: 一般用于将C++代码以标准C形式输出(即以C的形式被调用),这是因为C++虽然常被认为是C的超集,但是C++的编译器还是与C的编译器不同的.C中调用C++中的代码这样定义会是安全的. 一般 ...

  6. ECNUOJ 2149 华丽的队列

    华丽的队列 Time Limit:3000MS Memory Limit:65536KBTotal Submit:531 Accepted:68 Description  每年,都有很多新同学来到我们 ...

  7. 设置UITableViewCell高度的问题

    有非常多时候.UITableViewCell每行的高度是不固定的,须要动态设置. UITableView有个代理方法, -(CGFloat)tableView:(UITableView *)table ...

  8. HDU44979 GCD and LCM (素因子分解+计数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4497 题意: 求有多少种(x,y,z)使得最小公倍数为l,最大公约数为g 分析: 我们将l,g进行素因 ...

  9. legend---五、如何优雅的实现多继承

    legend---五.如何优雅的实现多继承 一.总结 一句话总结:多继承可以通过把别人对象作为属性来调用属性的方法执行, 继承的本质也是为了调用方法和属性,而上述的方式可以满足 1.php中前端可以共 ...

  10. Codeforces--602A--Two Bases(水)

    Two Bases Time Limit: 1000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Submit St ...