原生JS--COOKIE
原生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的更多相关文章
- 原生JS 的cookie和jq的cookie,
COOKIE基础及应用:1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名2.COOKIE的特性: --同一个网站中,所有的页面共享同一套cookie --数量,大小有 ...
- 原生js登录创建cookie
原生js创建cookie,功能:点击登录按钮时,将用户名.密码存为cookie:页面再次加载时,自动读取cookie中的用户名.密码. <html><head><titl ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- 原生js实现 常见的jquery的功能
原生选择器 充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
- Ajax进阶之原生js与跨域jsonp
什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...
- 原生js实现ajax跨域(兼容IE8,IE9)
html设置meta标签兼容360兼容模式和IE怪异模式 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8 ...
随机推荐
- centos install zookeeper cluster
1.apache官方下载, 2.新版本需要jdk环境,然后配置好jdk环境 3.解压zookeeper,进入解压后的conf,新建zoo.cfg (删掉自带的cfg)内容如下 tickTime=200 ...
- 玩坏JVM很简单--toString的递归调用
在JVM的内存管理机制下很少发生内存溢出的情况.至少我碰见的少,好像在SSH我多次发布项目时候出现过一次.今天看见一个特简单的方法让内存溢出(好吧,我似乎作死了--!): public class I ...
- vue 解决display与 transition冲突
下边是vue的源码 var raf = inBrowser && window.requestAnimationFrame; var waitForTransitionStart = ...
- scp使用加密算法报错unknown cipher type
为了提高scp的传输速度指定了scp的加密算法为arcfour $ scp -c arcfour localFile userName@remoteIP:remoteFile 得到报错unknown ...
- angularjs - 415 (Unsupported Media Type)
angularJs+springMVC angular表单提交一个user实体时,报 angularjs - 415 (Unsupported Media Type)错误!! 原因是$http({ u ...
- EL表达式与JSTL
内容包括 EL表达式 EL函数库 JSTL 核心标签库 格式化标签库 SQL标签库 XML标签库 自定义标签库 EL表达式 EL是Expression Language的是缩写,是JSP页面编写的一种 ...
- Mysql VARCHAR(X) vs TEXT
一般情况下,我们不太会纠结用Varchar或text数据类型. 比如说,我们要存储邮箱,我们自然会用varchar,不会想到用text.而当我们要存储一段话的时候,选了text,感觉varchar也够 ...
- Wysiwyg Editors 标签过滤
针对October CMS编辑器插件取消自动过滤DIV标签开关: 找到modules\backend\formwidgets\richeditor\assets\vendor\redactor\red ...
- 《linux内核设计与实现》读书笔记第三章
第3章 进程管理 3.1 进程 1.进程 进程就是处于执行期的程序. 进程包括: 可执行程序代码 打开的文件 挂起的信号 内核内部数据 处理器状态 一个或多个具有内存映射的内存地址空间 一个或多个执行 ...
- Yii常用路径说明
原作者地址:http://www.kuitao8.com/20140520/2483.shtml //framework路径 Yii::getFrameworkPath(); //protected/ ...