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,如需转载请自行联系原作者。

目录
相关文章
|
7天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
7天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
13 3
|
7天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
16 0
|
7天前
|
JavaScript 前端开发 Java
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙(下)
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙
10 0
|
7天前
|
存储 前端开发 Java
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙(上)
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙
10 0
|
7天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
13 2
|
7天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
12 3
|
7天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
7天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
18 0
|
7天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
16 2