js利用cookie实现记住用户页面操作

前言

开发过程中,有时候会遇到一些类似需求,比如记住用户在浏览器层面所做的操作。之前做过一个功能,当时使用了一个拖拽插件展示一个类似九宫格的报表图,每个图形都可以显示和隐藏,如果用户点击了显示或隐藏按钮,那么下次进入系统时浏览器保留上一次的操作结果。核心部分是使用js对cookie进行操作,具体业务部分则是触发点击图形事件时,如果是隐藏,则将该图形对应的div从cookie中删除,点击显示时,将图形div写入cookie。本文只记录cookie部分操作,具体业务代码大家可以根据自己的实际情况去写。

什么时cookie?

  • cookie有4kb大小,超出长度会返回空字符串;
  • cookie存放在客户端,可以方便的修改查看,所以不能用cookie存放重要信息;
  • cooki生命周期会在关闭浏览器以后结束,如果要在一段事件内使用,我们可以为cookie设置有效时间;

Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。定义于 RFC2109 和 2965 中的都已废弃,最新取代的规范是 RFC6265 [1] 。(可以叫做浏览器缓存)
——引用自百度百科

方法如下

1.设置cookie 参数: cname:cookie 名称,cvalue:cookie 值 ,exdays:cookie 的过期时间

function setCookie(cname,cvalue,exdays)
{
 var d = new Date();
 d.setTime(d.getTime()+(exdays*24*60*60*1000));
 var expires = "expires="+d.toGMTString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
}

2.获取cookie

function getCookie(cname)
{
 var name = cname + "=";
 var ca = document.cookie.split(';');
 for(var i=0; i<ca.length; i++)
 {
 var c = ca[i].trim();
 if (c.indexOf(name)==0) return c.substring(name.length,c.length);
 }
 return "";
}

3.删除cookie

function delCookie(cname)
{
 var exp = new Date();
 exp.setTime(exp.getTime()-1);
 var cval = getCookie(cname);
 if(cval != null){
	document.cookie = cname + "=" + cval + ";expires=" + exp.toGMTString();
 }
}

希望这篇文章对你有所帮助,如果有用的话,记得关注我吆,后期持续为大家输出更多内容

参考:cookie操作

总结

到此这篇关于js利用cookie实现记住用户页面操作的文章就介绍到这了,更多相关js cookie记住用户内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-03-14

js使用cookie实现记住用户名功能示例

本文实例讲述了js使用cookie实现记住用户名功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net cookie记住用

js cookie实现记住密码功能

本文为大家分享了js和jQuery记住密码功能的方法,具体如下 一. js 实现记住密码功能 html: <form id="form22" name="form22" action="checklogin.action" method="post" > <div class="username" style="margin-top:50px;"> <lab

js中利用cookie实现记住密码功能

在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo

js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)

js COOKIE 记住帐号或密码 function onLoginLoaded() { if(isPostBack == "False") { GetLastUser(); } } function GetLastUser() { var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67"; var usr = GetCookie(id); if(usr != null) { document.getElementById('t

JavaScript使用cookie实现记住账号密码功能

很多登录功能上都有个"记住密码"的功能,其实无非就是对cookie的读取. 下面展示这个功能的代码,原作者已无法考究.... 测试方法:直接输入账号密码,提交后,刷新页面,再输入同样的账号,就可以显示 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>

JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍

cookie是网站设计者放置在客户端(浏览器)的小文本文件,cookie不仅能够实现保存密码功能,还可以通过cookie保存最近浏览记录增加用户体验. 在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"

js基于cookie方式记住返回页面用法示例

本文实例讲述了js基于cookie方式记住返回页面的用法.分享给大家供大家参考,具体如下: 首先明确以下概念 ①. 同名的 cookie,不同的 domain 或不同的 path,属不同的 cookie: 同名的 cookie,相同的 domain 且相同的 path,不同的 expires,属同一个 cookie. ②. 不加过期时间的cookie在浏览器关闭后失效 ③ 二级域名cookie可以生效,通过指定domain 于是在js端 document.cookie="back_url=&qu

静态页面利用JS读取cookies记住用户信息

静态页面由于其稳定性快速性,的确给SE.用户及站长带来了方便.但有时,需要记住用户的信息,如用户留下评论后,下一次再来,就要记住该用户的信息,不必再次输入. 这对用户来说,可以提高他们的归属感,熟悉感.如何实现呢?     首先,我们需要在用户提交评论后,给客户端赋予几个相关的cookies值,这个很简单,直接在评论提交页面进行赋值就可以了,asp下的cookies简单赋值方式采用下面的这样的语句: 复制代码 代码如下: response.cookies("username")=&qu

JS读取cookies信息(记录用户名)

首先,在用户提交评论后,让客户端cookies记录相关值,例如:asp下的cookies赋值方式采用下面的这样的语句: 复制代码 代码如下: response.cookies("username")="name" response.cookies("username").expires=Date+30 通过以上asp程序给cookies赋值.如何在静态页html读取这个cookies,并且显示在用户?因为是生成了html,我们无法再利用asp程序

利用js读取动态网站从服务器端返回的数据

在html中利用js读取动态网站从服务器端返回的数据进行显示 1.js.html 页面 需要引入 执行jquery的js文件 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator"

微信小程序的注册页面包含倒计时验证码、获取用户信息

1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'

新发现一个骗链接的方法(js读取cookies)

你好,我们已经加 http://www.114desk.com 为友情链接了, 下面这个网页里最后一个链接是你们的 http://www.bole18.com/link.php?result=%0A%0D%3D%3DQbvNmLrNXZkRTMx4yd3d3LvoDc0RHag1r1aHr5DD81dc 我们的GOOGLE PR为4,链我们请使用下面代码,谢谢 <a href="铂金钻戒网">http://www.bole18.com</a> 于是我打开其网址,

利用PHP自动生成印有用户信息的名片

前言 无论是自己要在精心P过的自拍上添加个性文字,或者是摄影爱好者要在拍摄的作品里添加水印,亦或是在网页或者移动应用中实时生成文字和图片的组合,我们都需要找到一个合适且靠谱的方法来将图片和文字完美的结合在一起. 所以,"最好的编程语言"PHP及其GD库就给我们提供了这样一套简单且高效的解决方案. 我知道,这时候有个实例才是最好的~ 下面就让我来举个简单的栗子! 目标 将用户在网页应用中输入的个人信息与图片结合,生成一张印有用户信息的名片. 效果 1 预设一张图片,作为名片背景 名片背景

页面利用渐进式JPEG来提升用户体验度

今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同. Baseline JPEG 这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中.打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示.如果文件较大或者网络下载速度较

php用户注册页面利用js进行表单验证具体实例

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <meta ht

利用js实现禁止复制文本信息

做SEO的都知道,发原创文章对自己网站的优化是非常好的,特别是在搜文章标题的时候,原创的一般排名第一.但是优化是给搜索引擎看的.而在互联网有个很头痛的问题,一篇文章对搜索引擎来说到底谁是原创.这个是不一定的.举个简单例子:比如你在博客(当然假设你博客每日访问量很低,每天就几百人的情况下)上发表了一篇优质原创文章.但没过几小时或几天被人转载到了一个大型门户网站还不带你文章的原创连接的,比如 A5 这种网站.那么过段时间,你再搜文章的标题的时候,谁排第一这个就不好说了.本人可是有这种亲身体会的.为此

SQL SERVER 利用存储过程查看角色和用户信息的写法

1.查看服务器角色相关信息 SP_HELPSRVROLE SP_HELPSRVROLEMEMBER 服务器角色 SP_HELPSRVROLE 服务器角色 2.查看数据库角色相关信息 SP_HELPROLE SP_HELPROLEMEMBER 数据库角色 SP_HELPROLE 数据库角色 3.查看用户相关信息 SP_HELPUSER SP_HELPUSER 数据库用户名