原生JS--COOKIE:

COOKIE基础及应用:
1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名
2.COOKIE的特性:
  --同一个网站中,所有的页面共享同一套cookie
  --数量,大小有限(4k-10k,不能用来存大的内容)
  --过期时间

3.设置cookie:(本地下测试cookie要在FF下面测试,IE,Chrom会把cookie去掉);
  --格式:名字=值(多条数据通过'; '(即分号和空格) 来分开)
  --不会覆盖document.cookie="user=yufan";document.cookie="pass=123456";
  --过期时间:expires=时间
  --COOKIE与日期对象共同使用,设置过期时间
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+14);    //设置获取的日期,并不是系统日期
    document.cookie="user=yufan; expires="+oDate; //这样设置的这个cookie将在14天后过期

4.将设置cookie封装成一个函数:
    function setCookie(name,value,myDay){
      var oDate=new Date();
      oDate.setDate(oDate.getDate()+myDay);
      document.cookie=name+'='+value+'; expires='+oDate;
    }
    setCookie('username','yufan',25);
    setCookie('pass','123456',14);

5.读取cookie:对获取的document.cookie进行字符串分割
  读取cookie封装成一个函数:
    function getCookie(name){
      //document.cookie获取当前网站的所有cookie
      var arr=document.cookie.split('; ');
      for(var i=0;i<arr.length;i++){
        var arr1=arr[i].split('=');
        if(arr1[0]==name){
          return arr1[1];
        }
      }
      return '';
    }
  alert(getCookie(username));

6.删除cookie:时间设置为已经过期的时间,系统自然会删除
  function removeCookie(name){
    setCookie(name,1,-1);
  }
  removeCookie(username,1,-1);

7.示例:记住用户登录的用户名和密码
    方法:可以在用户第一次登录时用cookie记住登录的用户名和密码,
           下次再打开页面时用户名和密码就自动出现在表单里面
      --提交时:记住用户名
      --window.onload:读取用户名

 HTML代码:
<div id="cookie">
<form id="form1" action="">
用户名:<input type="text" name="username" value="">
密码:<input type="password" name="password" value="">
<input type="submit" name="" value="登录">
</form>
</div> JS代码:
<script type="text/javascript">
//cookie记住用户名,密码
window.onload=function(){
var oForm=document.getElementById('form1');
var username=document.getElementsByName('username')[0];
var pass=document.getElementsByName('password')[0];
oForm.onsubmit=function(){
setCookie('username',username.value,25);
setCookie('pass',pass.value,25);
}
username.value=getCookie('username');
pass.value=getCookie('pass'); function setCookie(name,value,myDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+myDay);
document.cookie=name+'='+value+'; expires='+oDate;
} function getCookie(name){
//document.cookie获取当前网站的所有cookie
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr1=arr[i].split('=');
if(arr1[0]==name){
return arr1[1];
}
}
return '';
} }
</script>

原生JS--COOKIE的更多相关文章

  1. 原生JS 的cookie和jq的cookie,

    COOKIE基础及应用:1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名2.COOKIE的特性:  --同一个网站中,所有的页面共享同一套cookie  --数量,大小有 ...

  2. 原生js登录创建cookie

    原生js创建cookie,功能:点击登录按钮时,将用户名.密码存为cookie:页面再次加载时,自动读取cookie中的用户名.密码. <html><head><titl ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  5. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  6. 原生js实现 常见的jquery的功能

    原生选择器   充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...

  7. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  8. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

  9. Ajax进阶之原生js与跨域jsonp

    什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...

  10. 原生js实现ajax跨域(兼容IE8,IE9)

    html设置meta标签兼容360兼容模式和IE怪异模式 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8 ...

随机推荐

  1. centos install zookeeper cluster

    1.apache官方下载, 2.新版本需要jdk环境,然后配置好jdk环境 3.解压zookeeper,进入解压后的conf,新建zoo.cfg (删掉自带的cfg)内容如下 tickTime=200 ...

  2. 玩坏JVM很简单--toString的递归调用

    在JVM的内存管理机制下很少发生内存溢出的情况.至少我碰见的少,好像在SSH我多次发布项目时候出现过一次.今天看见一个特简单的方法让内存溢出(好吧,我似乎作死了--!): public class I ...

  3. vue 解决display与 transition冲突

    下边是vue的源码 var raf = inBrowser && window.requestAnimationFrame; var waitForTransitionStart = ...

  4. scp使用加密算法报错unknown cipher type

    为了提高scp的传输速度指定了scp的加密算法为arcfour $ scp -c arcfour localFile userName@remoteIP:remoteFile 得到报错unknown ...

  5. angularjs - 415 (Unsupported Media Type)

    angularJs+springMVC angular表单提交一个user实体时,报 angularjs - 415 (Unsupported Media Type)错误!! 原因是$http({ u ...

  6. EL表达式与JSTL

    内容包括 EL表达式 EL函数库 JSTL 核心标签库 格式化标签库 SQL标签库 XML标签库 自定义标签库 EL表达式 EL是Expression Language的是缩写,是JSP页面编写的一种 ...

  7. Mysql VARCHAR(X) vs TEXT

    一般情况下,我们不太会纠结用Varchar或text数据类型. 比如说,我们要存储邮箱,我们自然会用varchar,不会想到用text.而当我们要存储一段话的时候,选了text,感觉varchar也够 ...

  8. Wysiwyg Editors 标签过滤

    针对October CMS编辑器插件取消自动过滤DIV标签开关: 找到modules\backend\formwidgets\richeditor\assets\vendor\redactor\red ...

  9. 《linux内核设计与实现》读书笔记第三章

    第3章 进程管理 3.1 进程 1.进程 进程就是处于执行期的程序. 进程包括: 可执行程序代码 打开的文件 挂起的信号 内核内部数据 处理器状态 一个或多个具有内存映射的内存地址空间 一个或多个执行 ...

  10. Yii常用路径说明

    原作者地址:http://www.kuitao8.com/20140520/2483.shtml //framework路径 Yii::getFrameworkPath(); //protected/ ...