localStorage跟cookie的使用
最近做了记住密码功能,用localStorage跟cookie都尝试用了一下,感觉都挺好哈,很方便,特此记录
html代码:
<input type="text" id="userName" placeholder="账号">
<input type="password" id="password" placeholder="密码"/>
<input class="remember" type="checkbox" style="width: 0.3rem;margin-top: 0px;" id="" value=""/><label style="line-height: 32px;">记住密码</label>
<button id="btn">登录</button>
Js代码:
<script type="text/javascript">
//点击记住密码按钮
$(".remember").click(function(){ //如果有值,则将用户名跟密码存入localStorage或者cookie
if($(this).prop('checked') && $("#password").val()&& $("#userName").val()){
//localStorage.setItem("password",$("#password").val()); //存入localStorage写法
//localStorage.setItem("userName",$("#userName").val());
$.cookie('password', $("#password").val(), { expires: 7 }); //存入cookie写法(expires:7表示设置有效期为7天)
$.cookie('userName', $("#userName").val(), { expires: 7 });
}else{
//localStorage.setItem("password",'');
//localStorage.setItem("userName",'');
$.cookie("password",'',{ expires: -1 });
$.cookie("userName",'',{ expires: -1 });
} })
$("#btn").click(function(){
if($(".remember").prop('checked') && $("#password").val()&& $("#userName").val()){
//localStorage.setItem("password",$("#password").val());
//localStorage.setItem("userName",$("#userName").val());
// 创建一个cookie并设置有效时间为7天:
$.cookie('password', $("#password").val(), { expires: 7 });
$.cookie('userName', $("#userName").val(), { expires: 7 });
console.log($.cookie('password'));
}else{
$.cookie('password', '',{ expires: -1 }); //清空cookie里的password
$.cookie('userName', '',{ expires: -1 }); //清空cookie里的userName
//localStorage.setItem("password",''); //清空localStorage里的password
//localStorage.setItem("userName",''); //清空localStorage里的userName
}
var userName = $("#userName").val();
var password = $("#password").val();
if(!userName){
alertTip("请输入账号!");
}
if(!password){
alertTip("请输入密码!");
}
$.ajax({
url : basePath + '/login?loginName=' + userName + '&password=' + encodeURIComponent(password),
dataType : 'json',
type : "post",
success : function(data) {
if (!data.success) {
alertTip(data.errmsg);
return;
}
var userUid=data.user.userUid;
toApp(userUid)
window.location.href = 'index.html';
},
error : function() {
alertTip("未能连接到服务器!");
}
});
})
function toApp(userUid){
if (isAndroid()) { //给androidapp传参数
var jsonStr = JSON.stringify({"userUid": userUid});
AppHost.getUserUid(jsonStr);
} else { //给ios传参数
window.webkit.messageHandlers.getUserUid.postMessage({"userUid": userUid});
}
}
</script>
两者区别:
1.cookie的存储大小为4KB,而localStorage的存储数据大小一般都是:5MB
2.cookie若不设置有效时间,则生命周期随浏览器的关闭而结束,若设置了有效时间,则浏览器关闭,cookie数据也在,知道过了有效时间;而localStorage数据,除非你手动清楚,否则会一直存在
localStorage跟cookie的使用的更多相关文章
- sessionStorage 、localStorage 与cookie 的异同点
cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...
- sessionStorage 、localStorage 和 cookie 之间的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- sessionStorage 、localStorage 和 cookie 之间的区别(转)
essionStorage .localStorage 和 cookie 之间的区别(转) 2012-05-08 14:29:19| 分类: HTML5CSS3WEBAPP|举报|字号 订阅 ...
- 本地存储sessionStorage 、 localStorage 、cookie整理
sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...
- sessionStorage、localStorage、cookie
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- sessionstorage,localstorage和cookie之间的区别以及各自的用法
由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...
- sessionStorage 、localStorage 和 cookie
localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...
- localStorage sessionStorage cookie indexedDB
目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...
- localStorage和cookie操作
localStorage和cookie操作代码: cookie: { isSupportCookie: function() { return navigator.cookieEnabled; }, ...
随机推荐
- [转]iOS:批量导入图片和视频到模拟器的相册
IOS开发中我们经常会用到模拟器调试,模拟器有个主要的好处就是程序启动块,最重要的是如果没有证书的话,我们就只能在模拟器上调试了.使用模拟器调试时我们可能碰到需要从系统相册选择图片的情况,特别是做图片 ...
- Java NIO学习与记录(二):FileChannel与Buffer用法与说明
FileChannel与Buffer用法与说明 上一篇简单介绍了NIO,这一篇将介绍FileChannel结合Buffer的用法,主要介绍Buffer FileChannel的简单使用&Buf ...
- #PHP# 华为云 API 方式发送短信
使用给华为云 消息 服务 API 方式发送短信 代码来自华为云,已通过测试 <?php /** * 华为云发送短信示例代码 * 本段代码需要使用自己的配置信息才能正常运行,出配置信息外,不需要改 ...
- mysql使用常见问题
常见问题之一: 启动mysql时显示: The server quit without updating PID file 1.可能是/usr/local/mysql/data/mysql.pid文件 ...
- 2019.4.25 表格表单与HTML5 && CSS3
目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...
- C# 文件操作系列一
在.Net环境中,所有关于文件操作的类都在System.IO命名空间下,注:在修改文件时,安全性显得格外重要,但是本随笔不过多讲述安全性,这里假设我们有足够的权限. 1.管理文件系统 先通过一幅图来了 ...
- WebDriver获得表格里所有单元格的文本
方法为: 1. 得到表格中所有的tr,存到list到中 2.对tr进行循环,根据当前的tr,得到当前所有td的集合存到list当中 3.循环中所有td里的文本 package com.example. ...
- [心平气和读经典]The TCP/IP Guide(001)
The TCP/IP Guide[Page 40,41] Introduction To the TCP/IP Guide | TCP/IP指南概述 As I sit here writing thi ...
- typeof, offsetof 和container_of
要理解Linux中实现的双向循环链表("侵入式"链表),首先得弄明白宏container_of. 本文尝试从gcc的关键字typeof和宏offsetof入手,循序渐进地剖析宏co ...
- 我们的GAME-TECH沙龙北京站完美收官了,都讨论了些啥?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由 腾讯游戏云 团队首发与云+社区 摘要:4月13日,腾讯游戏云GAME-TECH游戏开发者技术沙龙于北京举办.此次活动是腾讯游戏云游戏 ...