javascript操作cookie

简介:
问题:
    使得在访问页面的时候能够沿用上次的设置,或者在不同的页面间共享数据。比如用户在访问网站的时候设置了页面字体的大小,那么会希望下次访问的时候仍然能使用同样的设置进行浏览,而不用重复设置。
解决方案:
    在用户浏览页面并进行设置时,将这些设置保存在cookie中,下次访问的时候读取cookie中的设置。
    参考下面的脚本:

     //  utility function to retrieve an expiration data in proper format;
     function  getExpDate(days, hours, minutes)
    {
        
var  expDate  =   new  Date();
        
if ( typeof (days)  ==   " number "   &&   typeof (hours)  ==   " number "   &&   typeof (hours)  ==   " number " )
        {
            expDate.setDate(expDate.getDate() 
+  parseInt(days));
            expDate.setHours(expDate.getHours() 
+  parseInt(hours));
            expDate.setMinutes(expDate.getMinutes() 
+  parseInt(minutes));
            
return  expDate.toGMTString();
        }
    }

    
// utility function called by getCookie()
     function  getCookieVal(offset)
    {
        
var  endstr  =  document.cookie.indexOf( " ; " , offset);
        
if (endstr  ==   - 1 )
        {
            endstr 
=  document.cookie.length;
        }
        
return  unescape(document.cookie.substring(offset, endstr));
    }

    
//  primary function to retrieve cookie by name
     function  getCookie(name)
    {
        
var  arg  =  name  +   " = " ;
        
var  alen  =  arg.length;
        
var  clen  =  document.cookie.length;
        
var  i  =   0 ;
        
while (i  <  clen)
        {
            
var  j  =  i  +  alen;
            
if  (document.cookie.substring(i, j)  ==  arg)
            {
                
return  getCookieVal(j);
            }
            i 
=  document.cookie.indexOf( "   " , i)  +   1 ;
            
if (i  ==   0 break ;
        }
        
return ;
    }

    
//  store cookie value with optional details as needed
     function  setCookie(name, value, expires, path, domain, secure)
    {
        document.cookie 
=  name  +   " = "   +  escape(value)  +
            ((expires) 
?   " ; expires= "   +  expires :  "" +
            ((path) 
?   " ; path= "   +  path :  "" +
            ((domain) 
?   " ; domain= "   +  domain :  "" +
            ((secure) 
?   " ; secure "  :  "" );
    }

    
//  remove the cookie by setting ancient expiration date
     function  deleteCookie(name,path,domain) 
    {
        
if (getCookie(name))
        {
            document.cookie 
=  name  +   " = "   +
                ((path) 
?   " ; path= "   +  path :  "" +
                ((domain) 
?   " ; domain= "   +  domain :  "" +
                
" ; expires=Thu, 01-Jan-70 00:00:01 GMT " ;
        }
    }

    使用getCookie(name)函数来读取cookie中保存的值,参数name为cookie项的名称。如果该cookie项不存在则返回一个空字符串。
    使用setCookie()函数来保存cookie项的值,其中第一、二两个参数分别为cookie项的名称和值。如果想为其设置一个过期时间,那么就需要设置第三个参数,这里需要通过getExpDate()获得一个正确格式的参数。
    最后,使用deleteCookie()来删除一个已存在的cookie项,实际上是通过让该项过期。
    cookie将数据保存在客户端。页面的脚本只能读取所在域和服务器的cookie值,如果域内有多个服务器,那么需要设置第五个参数,以指定服务器。浏览器的容量一般限定为每服务器20个name/value对,每个cookie项不超过4000个字符,更现实点,单个cookie项应少于2000字符,也就是说不要用cookie在客户端保存大容量数据。
    不同的浏览器保存cookie的方式也有所不同。IE为每个域的cookie建立一个文本文件,而Netscape则将所有的cookie存储在同一个文本文件中。
    注意:cookie存放在客户端,所以会受到浏览器设置的影响,比如用户可能会禁用cookie。要检测浏览器是否支持cookie,使用属性navigator.cookieEnabled来判断。


    参考: (Oreilly) Java Script And Dhtml Cookbook.chm


本文转自一个程序员的自省博客园博客,原文链接:http://www.cnblogs.com/anderslly/archive/2006/10/11/javascriptcookie.html,如需转载请自行联系原作者。

目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
2月前
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
|
3月前
|
前端开发 JavaScript Java
【面试题】说说 JavaScript数组常见的操作 (20个)
【面试题】说说 JavaScript数组常见的操作 (20个)
|
3月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
10天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
10天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
17天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集