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 ...
随机推荐
- 【DNN引用包】
<%@ Register TagPrefix="dnn" TagName="address" Src="~/controls/address.a ...
- vue 中使用querySelect 封装的万能选择器
function query (el) { if (typeof el === 'string') { var selector = el; el = document.querySelector(e ...
- PL/SQL恢复默认窗口样式
对于初学者来讲,使用PL/SQL时会不小心将窗体关闭,如下图 2. 怎么恢复呢?其实很简单 3. 搞定 转自:http://blog.csdn.net/hello_word2/article/deta ...
- core组件进阶
访问图像像素 存储方式 BGR连续存储有助于提升图像扫描速度. isContinuous()判断是否是连续存储. 颜色空间缩减 仅用这些颜色中具有代表性的很小的部分,就足以达到同样的效果. 将现有颜色 ...
- mongodb 的数据备份与恢复
导入/导出可以操作是本地的或远程的,所以都有以下通用选项[如果是操作本地机并且没有密码的话可以省去]: 1.-h host 主机 ...
- Nginx的日志管理
vim /usr/local/nginx/conf/nginx.conf #编辑 nginx 配置文件 server{ ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
- Redis封装值ZSet
/// <summary> /// Sorted Sets是将 Set 中的元素增加了一个权重参数 score,使得集合中的元素能够按 score 进行有序排列 /// 1.带有权重的元素 ...
- 方便查看线程状况的jsp页面
此方法来自深入理解java虚拟机一书,用作管理员页面,可以随时用浏览器查看线程堆栈 <%@ page language="java" import="java.ut ...
- linux RAC 安装失败完全卸载
1,删除软件安装目录 rm -rf /u01/app 2,删除以下目录内容 rm -rf /tmp/.oracle rm -rf /tmp/* rm -rf /tmp/ora* rm -rf ...