欢迎光临
我们一直在努力

运用JS设置cookie、读取cookie、删除cookie、清除全部cookie

cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。JavaScript是运行在客户端的脚本,因此是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在客户端的,所以可以用JS来设置cookie.

假设有这样一种情况,在某个流程中,由A页面跳转至B页面,若在A页面中采用JS用变量data保存了某一变量的值,在B页面的时候,同样需要使用JS来引用data的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,没有达到保存的效果。解决这个问题的最好方案是采用cookie来保存该变量的值,那么如何来设置和读取cookie呢?

首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:

假设在A页面中要保存变量user_name的值(“harry”)到cookie中,key值为name,则相应的JS代码为:

         var user_name = 'harry';
         document.cookie="name="+user_name;

JS读取cookie:

假设cookie中存储的内容为:user_name=harry;password=abc123,
则在B页面中获取变量user_name的值的JS代码如下:

         var user_name = document.cookie.split(";")[0].split("=")[1];
         //JS操作cookies方法!
         //写cookies
         function setCookie(name, value, days)
         {
           var d = new Date();
           d.setTime(d.getTime() + days*24*60*60*1000);
           document.cookie = name + "="+ escape (value) + ";expires=" + d.toGMTString();
         }

读取cookie:

         function getCookie(name)
         {
           var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
           if(arr=document.cookie.match(reg))
             return unescape(arr[2]);
           else
             return null;
         }

删除cookie

         function delCookie(name)
         {
           var exp = new Date();
           exp.setTime(exp.getTime() - 1);
           var cval=getCookie(name);
           if(cval!=null)
             document.cookie= name + "="+cval+";expires="+exp.toGMTString();
         }

清除全部cookie值

         function clearCookie () {
           var keys = document.cookie.match(/[^=;]+(?==)/g);
           if (keys) {
             for (var i = keys.length; i++;) {
               document.cookie = keys[i] + "=0;expires=" + new Date(0).toUTCString()
             }
           }
         }

cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点。它可以用于以下几种场合。

(1)保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个 月、一年等。

(2)跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了 cookie后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便。

(3)定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。

(4)创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样,在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品,方便随时进行比较。

当然,上述应用仅仅是cookie能完成的部分应用,还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种:

(1)cookie可能被禁用。当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能;

(2)cookie是与浏览器相关的。这意味着即使访问的是同一个页面,不同浏览器之间所保存的cookie也是不能互相访问的;

(3)cookie可能被删除。因为每个cookie都是硬盘上的一个文件,因此很有可能被用户删除;

(4)cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理。

赞(0) 打赏
未经允许不得转载:码农资源网 » 运用JS设置cookie、读取cookie、删除cookie、清除全部cookie
分享到

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册