<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  用户名：<input type="text" name="user" id="user">

  年龄：<input type="text" name="age" id="age">

  <input type="button" name="" value="提交" id="btn">

</body>

</html>

　　

JS代码

<script type="text/javascript">

  // 设置cookie

  function setCookie(){

    // 获取当前时间

    var date = new Date();

    // 支持传一个json {name:value}

    var a = arguments;

    if(a.length==2){

      // 设置过期时间 = 当前时间 + 过期时间；

      date.setDate(date.getDate()+a[1]);

      for(k in a[0]){

        document.cookie = k +"="+ encodeURI(a[0][k]) +";expires=" + date.toGMTString()+";path=/";

      }

    }else{

      date.setDate(date.getDate()+a[2]);

      // 设置cookie = 值=value  encodeURI(把值进行编码) expires设置过期时间 path设置网站目录访问cookie权限，/表示当前域名下的所有目录都可以访问这个cookie

      document.cookie = a[0] +"="+ encodeURI(a[1]) +";expires=" + date.toGMTString()+";path=/";

    }

  }

  // 读取cookie

  function readCookie(name){

    // 获取cookie decodeURI把cookie进行解码

    var cookie = decodeURI(document.cookie);

    // 获取当前名称的起始索引

    var start = cookie.indexOf(name+'=');

    // 如果找不到这个名称的话就直接返回；

    if(start==-1)return '';

    // 获取结束索引，start表示开始查找的起点

    var end = cookie.indexOf(';',start);

    // 如果返回-1说明是最后一条数据

    if(end==-1){

      // 最后一条直接截取到末尾

      return cookie.substring(start+name.length+1);

    }

    // 如果不是末尾的话截取到;

    return cookie.substring(start+name.length+1,end);

  }

  // 删除cookie

  function removeCookie(name){

    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";

  }

  // 写入cookie

  var oBtn = document.getElementById('btn');

  oBtn.onclick = function(){

    var user = document.getElementById('user').value;

    var age = document.getElementById('age').value;

    // 设置cookie

    setCookie({

      'user':user,

      'age':age

    },10);

  };

  // 打印cookie

  console.log(readCookie('user'));

</script>

　　

使用方法：

　　设置cookie：setCookie()支持传递2个或3个参数 json&&time || nam&&value&&time              json:{name:value},time:多久过期

　　读取cookie：readCookie(要读取的cookie名称)

　　删除cookie：removeCookie(要删除的cookie名称)

　　

以上也是闲来无事写的，仅供参考，如果有不懂的可以在下方留言，如果多人需要帮助的话我再另外开一片文章专门讲。

javscript对cookie的操作，以及封装的更多相关文章

  1. java对cookie的操作

    java对cookie的操作比较简单,主要介绍下建立cookie和读取cookie,以及如何设定cookie的生命周期和cookie的路径问题. 建立一个无生命周期的cookie,即随着浏览器的关闭即 ...

  2. Asp.Net Core 2.0 项目实战（4）ADO.NET操作数据库封装、 EF Core操作及实例

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

  3. 原生js--cookie操作的封装

    封装cookie的操作:查询cookie个数.查询所有cookie的键.获取cookie.设置cookie.删除cookie.清除全部cookie /** * cookieStorage */func ...

  4. js 第四章 cookie的操作

    js 第四章 cookie的操作 一.学习要点 掌握cookie的简单应用 二. js 第四章 cookie的操作 了解cookie 什么是cookie? cookie 是存储于访问者的计算机中的变量 ...

  5. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  6. Jquery对Cookie的操作

    第一步:先引用jQuery的插件jquery-1.9.1.min.js 第二步:引用jquery.cookie.js插件 下对cookie的操作: $.cookie("cookieName& ...

  7. PHP中对数据库操作的封装

    在动态网面设计中很多都要涉及到对数据库的操作,但是有时跟据需要而改用其它后台数据库,就需要大量修改程序.这是一件枯燥.费时而且容易出错的功作.其实我们可以用PHP中的类来实现对数据库操作的封装,从而使 ...

  8. c#读写共享内存操作函数封装

    原文 c#读写共享内存操作函数封装 c#共享内存操作相对c++共享内存操作来说原理是一样,但是c#会显得有点复杂. 现把昨天封装的读写共享内存封装的函数记录下来,一方面希望给需要这块的有点帮助,另一方 ...

  9. C# .NET更智能的数据库操作的封装

    前述: 对数据库操作的封装,相信网络上已经有一大堆,ORM框架,或者是.NET本身的EF,都很好的支持数据库操作.这篇文章是分享自己所思考的,对数据库操作的简单封装.我对于这篇文章,认为被浏览者所关注 ...

随机推荐

  1. 【解题报告】BZOJ2550: [Ctsc2004]公式编辑器

    题意:给定一个可视化计算器的操作序列,包括插入数字.字母.运算符.分数.矩阵以及移动光标.矩阵插入行.插入列,输出操作序列结束后的屏显(数学输出). 解法:这题既可以用来提升OI/ACM写大代码模拟题 ...

  2. Android中 int 和 String 互相转换的多种方法

    1 如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([ ...

  3. [转]Java学习日记之 volatile

    用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对A的访问其实访问的是B.只在某些动作时才进行A和B的同步.因此存在A和B不一致的情况.volatile就是用来 ...

  4. 搭建一个SSH项目框架的步骤

    1.导入jar包(38个) 2.配置文件 applicationContext,xml (beans.xml) (数据源.LocalSessionFactoryBean.事务管理器.事务通知.AOP切 ...

  5. [转]c++中vector的使用

    C++中的vector使用范例 一.概述 vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector是一个容器,它能够存放各种类型的对象,简 ...

  6. SAP HANA企业级培训系列课程<第一部分>

    No. 课程 备注 1 HANA概述 HANA 特点 2 HANA Server & Studio & Client 认识HANA Server \Client\ Studio, 熟悉 ...

  7. DSO动态加载PHP模块到Apache服务器

    PHP在Linux/Unix平台上经常与Apache搭配使用,在安装PHP时,有三种安装方式可供选择:静态模式.动态模式(DSO).CGI二进制模式. 由于易于维护和升级,我强烈建议以DSO方式安装P ...

  8. 创建一个ArcGIS for Android 新项目并显示出本地的地图

    1.准备工作:首先要配置好android的开发环境,然后在Eclipse中安装ArcGIS for Android的开发控件:在ArcCatalog中发布好本地的地图服务. 2.安装完ArcGIS f ...

  9. 对初学者的MPLS 常见问题

    对初学者的MPLS 常见问题 2015年6月8日 16:04 阅读 186 问:什么是多协议标签交换 (MPLS)? 答:MPLS是一种数据包转发技术,该技术使用标签来做出数据转发决策. 利用MPLS ...

  10. java 动态代理示例，带主要注释

    Java proxy是基于反射,仅仅支持基于接口的动态代理. java 动态代理是一切架构的基础,必须了解. 废话少说,先上代码获得感性认识. 示例代码有主要注释. 接口: public interf ...