妙味5:document.cookie 操作

本地环境中测试需要用fireFox,其它几个浏览器不行,服务器都可以测出正确结果

cookie特点:

1. 如登陆信息存储,同一论坛打开多个页面不用重复登陆,就是通过cookie来存取实现;

2. 正常情况下,关闭浏览器,相应cookie信息会清除;

3. 若设置了cookie的过期时间,关闭浏览器不会清除数据,只有到期清除,也可以手动清除;

应用:

如邮箱登陆后,记住用户名

拖拽后记住位置

cookie封装函数(可以直接使用):

// 开始----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

//存入cookie

function setCookie(name, value, iDay){
     //name:cookie名字; value:cookie值; iDay:缓存天数
     var oDate=new Date();
     oDate.setDate(oDate.getDate()+iDay);
     document.cookie=name+‘=‘+value+‘;expires=‘+oDate;
}
//取出
function getCookie(name){
     //‘username=abc; password=123456; aaa=123; bbb=4r4er‘
     var arr=document.cookie.split(‘; ‘); //以分号加空格进行分割,结果:arr->[‘username=abc‘, ‘password=123456‘, ...]
     for(i=0;i<arr.length;i++){
          var arr2=arr[i].split(‘=‘);          //再次分割出名字进行比较,找到就返回相应的值,未找到就返回空
          if(arr2[0]==name){
               return arr2[1];
          }
     }
     return ‘‘;
}
//删除
function removeCookie(name){
     setCookie(name,‘1‘,-1);          //设置对应的为昨天过期即可
}

// 结束----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// 使用测试-----------------------------------------------------------------
setCookie(‘username‘,‘sdd‘,‘10‘);     //设置
setCookie(‘password‘,‘sdd2‘);
alert(document.cookie);               //查看
alert(getCookie(‘username‘));     //查看指定的
removeCookie(‘username‘);
alert(getCookie(‘username‘));     //删除指定的

// 记住用户名功能(需要加载上面三个cookie函数) =============================================================

window.onload=function(){
     var oForm=document.getElementById(‘form1‘);
     var oUser=document.getElementsByTagName(‘user‘)[0];     //input的name可以作为TagName来选择
     var oBtnclear=document.getElementsByTagName(‘a‘)[0];

oForm.onsubmit=function(){
          setCookie(‘user‘,oUser.value,30);
     };
     oUser.value=getCookie(‘user‘);
     oBtnClear.onclick=function(){
          removeCookie(‘user‘);
          oUser.value=‘‘;
     };
}

<form id="form1" action="http://www.miaov.com/">
     用户名:<input type="text" name="user" />
     密码:<input type="password" name="pass" />
     <input type="submit" value="登录" />
     <a href="javascript:;">清除记录</a>
</form>

时间: 2024-10-26 01:31:45

妙味5:document.cookie 操作的相关文章

妙味课堂Jquery从入门到插件开发到模拟视频教程 Jquery实战开发 Jquery UI

<jQuery课程 初级到高级到模拟>├<第一课:jQuery初级>│  ├01 妙味云课堂-jQuery简介.mp4│  ├02 妙味云课堂-jQuery设计思想之选择元素.mp4│  ├03 妙味云课堂-jQuery设计思想之写法.mp4│  ├04 妙味云课堂-jQuery设计思想之原生关系和链式操作.mp4│  ├05 妙味云课堂-jQuery设计思想之取值和赋值.mp4│  ├06 妙味云课堂-jQuery方法之filter not has.mp4│  ├07 妙味云课堂

【学+原】CSS3的2D动画 ——仿NOMOS手表—— 妙味课堂

看CSS3妙味课堂中有一课是介绍如何做钟表界面,然后三根针都能随着时间转动,然后自己在那个简易的版本上做了一些进一部改进. 最关键的知识点应该是transform-origin这个样式,要选对旋转的中心点.分针秒针时针的旋转中心点应该是针的底部中间位置 这个实例还是让我第一次见到把<style>设置了id,然后写进js里去操作的,因为表面的各种小时,秒的刻度的制作,需要用循环来写,直接写css样式里是不现实的. 另外就是要把setInterval和transform:rotate结合起来使用,

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程 写JS的步骤 先实现布局 想出实现原理 了解JS语法 希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素 利用margin值 …… 获取元

妙味远程课堂-JS热身运动-下

html由属性名和属性值组成 属性读操作:获取.找到 元素.属性名 属性写操作:添加.替换.修改 元素.属性名=新的值 元素.innerHtml//读取元素内的html内容 元素.innerHtml=新的值//修改或替换他里面的内容 案例1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>妙味1</title&

js 判断js函数、变量是否存在 JS保存和删除cookie操作,判断cookie是否存在的方法

//是否存在指定函数 function isExitsFunction(funcName) {    try {        if (typeof(eval(funcName)) == "function") {            return true;        }    } catch(e) {}    return false;}//是否存在指定变量 function isExitsVariable(variableName) {    try {        if

关于document.cookie的使用

设置cookie每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:document.cookie="userId=828";如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:document.cookie="userId=828; userName=hulk";在cookie的名或值中不能使用分号(;).逗号(,).等号(=)以及空格.在cookie的名中做 到这点很容易,但要保存的值是不确定的.如何来存

妙味课堂的导航效果

首页 首页 前端开发教程 前端开发教程 妙味视频教程 妙味视频教程 周末班上课安排 周末班上课安排 结课标准 结课标准 联系妙味 联系妙味 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,ul{margin: 0;padding: 0;} li{li

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) {   var oDate=new Date();   oDate.setDate(oDate.getDate()+iDay);   document.cook

JS中document.cookie详解

什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; document.cookie看上去就像一个属性,可以赋不同的值.但它和一般的属性不一样,改变它的赋值并不