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记住用户内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

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

  • 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读取cookies记住用户信息

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

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

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

  • 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

  • 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实现记住密码功能

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

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

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

  • JS利用cookie记忆当前位置的防刷新导航效果

    JS利用cookie记忆当前位置的防刷新导航效果

    本文实例讲述了JS利用cookie记忆当前位置的防刷新导航效果.分享给大家供大家参考.具体如下: 这里演示利用cookie记忆当前位置的防刷新导航条,主要向大家展示如何在Js中使用Cookies技术,用好了Cookies,会使你的Js技术更上一层楼.这个菜单就感觉不错,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cookie-nav-pos-menu-demo/

  • JS利用prototype给类添加方法操作详解

    本文实例讲述了JS利用prototype给类添加方法操作.分享给大家供大家参考,具体如下: 1.如何定义一个简单的类? 以下是一个没有任何属性和方法的类的定义: function MyClass(){}; 你可能会想,这不就是个简单的函数声明?没错,这个函数就是一个类的定义的实现.如何使用这个类呢?看下面的代码: var cls1 = new MyClass(); 这样,利用new就可以生成MyClass的一个实例了.所以在js中可以说函数就是类,类就是函数. 2.给类增加属性和方法 funct

  • node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    此内容需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.js博文: 1.下载Mysql数据库,安装并配置.创建用户表供登录使用: 2.node.js平台下Express的session与cookie模块包的配置:http://www.jb51.net/article/112190.htm 3.node.js平台下的mysql数据库配置及连接:http://www.jb51.net/article/110079.htm 完成前两步后需下载配置Ejs模

  • Android利用浮动窗口提示用户操作

    Android利用浮动窗口提示用户操作

    上次我们实现了利用viewpager实现对新用户的功能性介绍,今天我们来显示利用浮动窗口对用户进行操作的引导.先看效果图. 虽然界面比较丑,但是可以看到我们还是可以实现对用户进行比较好的操作提示,下面介绍怎么实现这种效果. 集成环境 这个项目中,我采用的是TourGuide开源项目,可以直接进入github地址进行学习与下载,这里我们只是简单的介绍怎么使用他来实现浮动界面的引导效果.首先是添加引用: 在你的gradle file中添加以下依赖,然后点击sync将依赖添加到自己的项目中就可以直接使

  • JS中cookie的使用及缺点讲解

     什么是Cookie Cookie意为"甜饼",是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.Opera等都支持Cookie. 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证.这样服务器就能从通行证上确认客户身份了.这就是Cookie的工作原理. Cookie实际上是一小段的文本信

随机推荐