js---- localStorage的基本用法
<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的基本用法的更多相关文章
- JS --- 本地保存localStorage、sessionStorage用法总结
JS的本地保存localStorage.sessionStorage用法总结 localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握localS ...
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- JQuery之append和appendTo的区别，还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- js确认框confirm()用法实例详解
先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...
- js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）
js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...
- 浅谈JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
随机推荐
- Kali linux 2016.2（Rolling）里Metasploit的OpenVAS
不多说,直接上干货! 关于OpenAVS的概念,我这里不多赘述. 前提得,大家要先安装好OpenVAS!!! 我们都知道,BT5中已经预先安装好了OpenVAS网络漏洞扫描工具,我们只需进行一些配置即 ...
- python 3.x 学习笔记5 （装饰器）
1.装饰器: 本质是函数,(装饰其他函数)就是为其他函数添加附加功能 原则: 1)不能修改被装饰的函数的源代码 2)不能修改被装饰的函数的调用方式 2.实现装饰器知识储备: 1)函数即“变量” 2)高 ...
- 用jquery控制表格奇偶行及活动行颜色
虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难, ...
- VMware Workstation pro14 虚拟机下安装CentOS6.8图文教程
转载收藏于 https://www.cnblogs.com/jepson6669/p/8371823.html 1 启动VMware的画面 2．点击 创建新的虚拟机 3 选择 典型(推荐) 4 选择 ...
- codeforces 540 B School Marks【贪心】
题意:一共n个数,给出其中k个数,要求这n个数的中位数为y,这n个数的和不超过x,补全剩下的n-k个数 先统计给出的k个数里面比中位数小的数, 如果cnt<=n/2,说明中位数还没有出现,把这n ...
- LLDB使用篇（上）
LLDB是个开源的内置于XCode的具有REPL(read-eval-print-loop)特征的Debugger,其可以安装C++或者Python插件. 本系列针对于已经知道何为debugger,且 ...
- 爬虫--pyquery使用
强大又灵活的网页解析库. 初始化 字符串初始化 html = ''' <div> <ul> <li class="item-0">first ...
- NodeJS学习笔记 (11)网络UDP-dgram(ok)
模块概览 dgram模块是对UDP socket的一层封装,相对net模块简单很多,下面看例子. UPD客户端 vs UDP服务端 首先,启动UDP server,监听来自端口33333的请求. se ...
- SQL Server存储ntext截断问题
SQL Server存储ntext截断问题 最近遇到一个问题:将大文本存储到数据库的时候,查询出来的文本却被截断了. 最后百度发现,作者提出 sql server management studi ...
- Linux Shell脚本编程-函数
函数介绍 定义:把一段独立功能的的代码当做一个整体,并为之一个名字,命名的代码段,此即为函数: 功能:函数function是由若干条shell命令组成的语句块,实现代码重用和模块化编程. 注意: ...