js设置cookie和localStorage

最新推荐文章于 2024-06-06 14:47:38 发布
最新推荐文章于 2024-06-06 14:47:38 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012441139/article/details/53841892
版权

两年没写博客了。。。现在转战前端，先贴个cookie的实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--cookie 服务器环境下才能设置cookie，每一个域名下最多20个cookie，每个cookie不超过4kb-->
		<p>用户名<input id="user" type="text" /></p>
		<p>密码<input id="pass" type="password" /></p>
		<button>登录</button>
		<button>登录2</button>
		<button>删除</button>
		<button>localStrage登录</button>
		<button>删除local</button>
	</body>
<script>
	var user = document.querySelector("#user");
	var pass = document.querySelector("#pass");
	var btn = document.querySelectorAll("button");
	var nowSecond=0;
	
	btn[0].onclick = function(e){
		var nowDate = new Date();
		var nowDay = nowDate.getDate();
		nowDate.setDate(nowDay+1);
		var userVal = user.value;
		var passVal = pass.value;
		document.cookie = "username="+userVal+";expires="+nowDate;//创建cookie
		document.cookie = "password="+passVal+";expires="+nowDate;//
		e.preventDefault();
	}
	btn[1].onclick = function(e){
		var userVal = user.value;
		var passVal = pass.value;
		setCookie("username",userVal,10);//函数传参创建cookie
		setCookie("password",passVal,10);
	}
	function setCookie(key,value,days){
		var nowDate = new Date();
		var nowDay = nowDate.getDate();
		nowDate.setDate(nowDay+days);
		document.cookie = key+"="+value+";expires="+nowDate;
	}
	
	
	btn[2].onclick = function(e){
		setCookie("username","",-1);//删除cookie，只要把时间设置成0或者负数即可
		setCookie("password","",-1);
	}
	var arr1 = document.cookie.split("; ");//把cookie分隔成数组，查找username对应的名字
	console.log(arr1);
	for(var i=0;i<arr1.length;i++){
		var arr2=[];
		arr2.push(arr1[i].split("="));
		console.log(arr2);
		for(var j=0;j<arr2.length;j++){
			if(arr2[j][0]=="username"){
				console.log(arr2[1]);
				break;
			}
		}
	}
	
	
	
//		localStorage.username = user.value;
//		localStorage.password = pass.value;
//		localStorage.time = new Date().getTime();
	btn[3].onclick = function(){
		localStorage.username = user.value;
		localStorage.password = pass.value;
		nowSecond = new Date().getTime();
		localStorage.time = nowSecond;
		var now = new Date().getTime();
		if(localStorage.time){
			if(now-nowSecond>2000){
				alert("身份过期，需要重新登录");
				user.value = "";
				pass.value = "";
				localStorage.username = user.value;
				localStorage.password = pass.value;
				return;
			}
		}
	}
	btn[4].onclick = function(){
		localStorage.removeItem("username");
	}
	user.value = localStorage.username;
	pass.value = localStorage.password;
</script>
</html>


王可夫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈cookie和localStorage那些事
12-14
总结一下，Cookie、localStorage和sessionStorage各有优缺点：Cookie适用于小量且需要跨域通信的数据，而localStorage和sessionStorage适用于大量且不需要跨域的数据存储。选择哪种存储方式取决于应用场景的需求。在...
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
在Web开发中，数据存储是不可或缺的一部分，jQuery提供了一些便捷的方法来访问和操作浏览器的本地存储，包括cookie、localStorage和sessionStorage。这三个机制都用于在客户端存储数据，但它们各有特点和适用场景。 ...
JavaScript Cookie & localStorage
xiangxiongfly
06-20 243
文章目录Cookie概述操作Cookie查询设置encodeURIComponent & decodeURIComponentexpires & max-agedomainpathHttpOnlysecure封装CookieLocalStorage概述使用设置查询删除 Cookie 概述 Cookie全称HTTP Cookie，是浏览器存储数据的一种方式 一般会自动随着浏览器每次请求发送到服务器 可以利用Cookie跟踪统计用户访问该网站的习惯，如：访问时间、访问页面、停留时间 不要在Co
JavaScript操作cookie与localStorage
赫连小妖
09-09 456
js操作cookie var Cookie = { setCookie: function(key, value, expiredays) { expiredays = expiredays || 30; //默认30天　 var exdate = new Date();　　　 exdate.setDate(exdate.getDate() + expiredays);　　　 docu
【Js】揭秘网页数据存储三大法宝：Cookie、LocalStorage与SessionStorage的深入解析与比较！
最新发布
墩墩分墩
06-06 944
而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。sessionStorage 与 localStorage 的接口类似，但保存数据的。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有。
JS中 Cookie、 LocalStorage 与 SessionStorage
weixin_30776273的博客
11-22 86
一、基本概念 1. Cookie cookie：主要用途有保存登录信息。cookie 非常小，它的大小限制为4KB左右。 用途：比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 2. LocalStorage localStorage生命周期是永久，这意味着除非用户显示在浏览器提...
js Cookie和localStorage的使用和区别
youyouyouyou44的博客
12-23 573
Cookie的使用 Cookie简介： Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的都已废弃，最新取代的规范是 RFC6265[1]。（可以叫做浏览器缓存）（百科上的正经解释，反正我也找不到更好的解释了n.n...
js——webStorage 和 cookie
肖的博客
08-28 1137
Window localStorage 属性 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 localStorage 属性是只读的。 提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 window.localSto...
cookie解决微信不能存储localStorage的问题
10-21
在上述代码示例中，我们看到了如何使用JavaScript操作cookie的两个关键函数：`setCookie`和`getCookie`。 1. `setCookie`函数用于设置cookie。它接收三个参数：cookie的名称（c_name）、要存储的值（value）以及...
超级存储：Cookie，localStorage和sessionStorage javascript帮助器
02-18
超级存储为cookie，localStorage和sessionStorage提供了一些帮助。 1Kb压缩 存储所有类型的值（对象和数组） 空时的默认值 前缀键 会话保持在标签之间 安装 安装npm软件包 npm install @jaysalvat/super-...
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
10-14
这主要包括三种机制：localStorage、sessionStorage 和 cookie。每种方法都有其特定的使用场景和特性。 1. sessionStorage sessionStorage 用于在同一个浏览器窗口内的不同页面之间共享数据。当用户关闭了浏览器...
【JavaScript】本地存储(localStorage、sessionStorage、cookie)
浅陌繁星的博客
01-02 766
如果勾选记住用户名，下次用户名打开浏览器，就在文本框里面自动显示上次登录的用户名。注意：不管我们设置的时候什么时间，都按照世界标准时间计算。cookie 存储的数据会跟随页面请求自动携带。cookie 默认是会话级，可以手动设置过期时间。内有这个key，则获得该key对应的value。：将获取到的cookie的值转换为对象形式。storage 存储的数据不会跟随页面携带。只能存储字符串，并且有自己的固定格式。默认是会话级别，可以手动设置过期时间。要先拿到当前的时间，向前调整8小时，
js,获取和设置cookie、 localStorage
weixin_30672295的博客
08-03 113
cookie 跟域名有关系的浏览器缓存 获取cookie document.cookie; 获取到的如果是多条cookie信息，是以分号和一个空格（"; "）隔开；a=1; b=2; c=3 //设置cookie document.cookie = key +"="+ value; 默认情况下cookie在关闭浏览器的时候就会自动清除，如果想保存，需要设置过期时间； 设置cookie过期时...
js本地储存方法：localStorage、sessionStorage、cookie
Be myself
04-24 672
前言 网络早期最大的问题之一是如何管理状态。简而言之，服务器无法知道两个请求是否来自同一个浏览器。当时最简单的方法是在请求时，在页面中插入一些参数，并在下一个请求中传回参数。这需要使用包含参数的隐藏的表单，或者作为URL参数的一部分传递。这两个解决方案都手动操作，容易出错。cookie出现来解决这个问题。 作用 cookie是纯文本，没有可执行代码。存储数据，当用户访问了某...
JS详解Cookie、LocalStorage和SessionStorage
天行健，自强不息 ; 地势坤，厚德载物
06-27 2296
基本概念 Cookie Cookie顾名思义，非常小，大小在4KB左右。主要用途是保存登录信息，比如登录一个网站市场，是可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨识用户身份的数据来实现的。 Cookie机制： 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随着关闭而结束，这种cookie简称cookie会话。如果在浏览器中设置了cookie的过期时...
HTML页面件传值方法；seeionStorage、localStorage、cookie 存储
夏小球的博客
06-06 2008
1.web存储 方法   1.1sessionStorage/localStorage存储方法: localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等,具体方法如下： 1.setItem存储value 用途：将value存储到key字段 用法：.setItem( key, value)
js本地储存web Storage和cookie的区别
小朱
06-17 1337
web Storage 有更大的储存 web Storage 使用更简单 Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
js【详解】本地存储 Cookie、sessionStorage、localStorage
朝阳39的博客
05-16 1582
目录 Cookie、sessionStorage、localStorage的区别 Cookie的用法 安装依赖 导入依赖 使用方法 Cookie操作引用类型的数据（数组、对象等） sessionStorage的用法 localStorage的用法 Cookie、sessionStorage、localStorage的区别 特性 Cookie sessionStorage localStorage 数据有效期 可自定义失效时间，默认是关闭浏览器后失效 .
Cookie 和 localStorage
twenj1616的博客
03-24 174
初识 Cookie Cookie 是什么 Cookie 全称 HTTP Cookie，简称 Cookie 是浏览器存储数据的一种方式 因为存储在用户本地，而不是存储在服务器上，是本地存储 一般会自动随着浏览器每次请求发送到服务器 在浏览器中操作 Cookie 不要在 Cookie 中保存密码等敏感信息 浏览器 F12 打开控制台，Application => Storage => Cookie 可查看添加 Cookie，控制台中键入命令 document.cookie 可查看 Coo
cookie和localstorage的区别
04-22
关于您的问题，Cookie和LocalStorage都是客户端存储数据的方式，但是它们有以下区别： 1. 存储容量：Cookie的存储容量最大只有4KB，而LocalStorage可以存储更多的数据，一般为5MB或更多。 2. 生命周期：Cookie有过期...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值