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 ...
随机推荐
- Android textView开头空两格问题，排版缩进2个汉字
一般为了排版,textView中字符段落开头一般都会空两格显示,如下图 但是如果你靠敲击空格来解决那就错了,那样在不同的屏幕上显示会差异,完美的解决方法是用转义字符”\t“,在段首加\t\t就解决.加 ...
- 机器学习(七) PCA与梯度上升法 (下)
五.高维数据映射为低维数据 换一个坐标轴.在新的坐标轴里面表示原来高维的数据. 低维 反向 映射为高维数据 PCA.py import numpy as np class PCA: def __ini ...
- PostgreSQL Replication之第六章 监控您的设置（3）
6.3 检查操作系统进程 一旦我们检查了归档以及我们的系统视图,我们就准备检查系统 进程.检查系统进程可能看起来有点粗糙,但它被证明非常有效. 在master上,我们可以简单地检查一个名为wal_se ...
- d3 bubble源码分析
技术 d3.d3.pack.d3.hierarchy 展示 https://bl.ocks.org/xunhanliu/e0688dc2ae9167c4c7fc264c0aedcdd1 关于怎么使用, ...
- 快速创建WCF服务和svcutil.exe工具使用
先简单的创建WCF服务: 系统会自动加上IService1接口 和 Service1 实现类 分别在IService1 和Service1 加上2段代码. [ServiceContract] publ ...
- HDU 5303 Delicious Apples（贪心 + 背包 2015多校啊）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5303 Problem Description There are n apple trees plan ...
- 判断DataGridView滚动条是否滚动到当前已加载的数据行底部
private void dataGridView1_Scroll(object sender, ScrollEventArgs e) { if (e.ScrollOrientation == S ...
- HIVE JOIN_1
HIVE JOIN 概述 Hive join的实现包含了: Common (Reduce-side) Join Broadcast (Map-side) Join Bucket Map Join So ...
- 【基础篇】Android手动卸载虚拟机程序
adb shell (进入模拟器自带的操作系统) cd data/app (切换到apk的安装目录) rm apk文件全称 例 : rm com.test.TestActivity.apk (手动删除 ...
- Jesse's Code
题目描述 Jesse是个数学迷,他最喜欢研究“哥德巴赫猜想”,因此他的计算机密码也都采用素数. 但一直用同一个密码是不安全的,所以他要经常更换他的密码.但他只允许自己的密码中出现某些数字,且密码的每一 ...