JS操作cookie以及本地存储（sessionStorage 和 localStorage ）

2022-09-29 08:05:06

JS操作cookie

cookie的操作用两种方式

1.substring

  //创建cookie

  function setCookie(name,value,expires,path,domain,secure){

    var cookieText=encodeURIComponent(name)+'='+encodeURIComponent(value);

    if(expires instanceof Date){

        cookieText+='; expires='+expires;

    }

    if(path){

        cookieText+='; path='+path;

    }

    if(domain){

       cookieText+='; domain='+domain;

    }

    if(secure){

       cookieText+='; secure';

    }

    document.cookie=cookieText;

  }

  //获取cookie

  function getCookie(name){

    var cookieName=encodeURIComponent(name)+'=';

    var cookieStart=document.cookie.indexOf(cookieName);

    var cookieValue=null;

    if(cookieStart>-1){

        var cookieEnd=document.cookie.indexOf(';',cookieStart);//indexOf()获取的是第一个匹配的元素的下标

        if(cookieEnd==-1){

         cookieEnd=document.cookie.length;

        }

        cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.legnth,cookieEnd))

    }

    return cookieValue;

  }

  //删除cookie

  function unsetCookie(name){

      document.cookie=name+"=; expires="+new Date(0);

  }

ps:

chrome浏览器在本地获取不到cookie。必须在服务器上才可以。如果是本地的话，你可以放到local的www目录下面。

Google Chrome只支持在线网站的cookie的读写操作，对本地html的cookie操作是禁止的。所以下面的代码如果你写在一个本地的html文件中，将弹出的对话框内容为空。

还有一种是w3c官网额操作（但是没有对内容编码和解码，不建议使用）

//设置cookie(这种方式并不好，应为，没有对cookie值进行编码和解码，)

  //但是，我们依然可以通过这个方法熟练它的写法滴呀

  function setCookie(name,value,exdays){

    var d=new Date();

    d.setTime(d.getTime()+(exdays*24*60*60*1000));

    var expires="expires="+d.toUTCString();

    document.cookie=name+'='+value+'; '+expires;

  }

  //获取cookie的操作(用split 然后substring)

  function getCookie(name){

      var cname=name+'=';

      var ca=document.cookie.split(';'); //用split分割成一个数组

      for(var i=0;i<ca.length;i++){

         if(ca[i].indexOf(name)!=-1){

           return ca[i].substring(cname.length)

           }

      }

      return "";

  }

  //清楚cookie

  function clearCookie(name){

     setCookie(name,"",-1);

  }

  function checkCookie(){

     var user=getCookie('userName');

     if(user!=''){

        alert('Welcome agin '+user);

     }else{

         if(user!="" && user !=null){

             setCookie("username",user,365)

         }

     }

  }

ps：补充一点编码和解码的知识；

JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：

unescape,decodeURI,decodeURIComponent 。

区别：

我们可以知道：escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法。而encodeURI()

用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent 应当是最常用的，它可以讲参数中的

中文、特殊字符进行转义，而不会影响整个URL。

html5中的新特性（sessionStorage 和 localStorage ）

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，

这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存

储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

一、web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，

这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

二、html5 web storage的浏览器支持情况
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是

javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

实例代码

function localStorageInfo1(){

  if(window.localStorage){

    alert('浏览器支持localStorage');

  }else{

    alert('浏览器不支持localStorage');

  }

  var key='userName';

  var value='yuanzhangliu';

  var key1='pwd';

  var value1='123456';

  //使用setItem赋值

  window.localStorage.setItem(key,value);

  window.localStorage.setItem(key1,value1);

  //用key方法来获取键值

  alert(window.localStorage.key(0));

  alert(window.localStorage.key(1));

  //使用getItem(key)方式来获取值

  alert(window.localStorage.getItem(key))

  alert(window.localStorage.getItem(key1));

  //使用removeItem(key)来移除值

  window.localStorage.removeItem(key);

  window.localStorage.removeItem(key1);

  //全部的清除

  window.localStorage.clear();

}

function localStorageInfo2(){

    //同样我们也可以使用第二种方式来操作；

    window.localStorage.keyName='value';

    window.localStorage['keyName1']='value1'

    //取值方式也可以变

    alert(window.localStorage.keyName);

    alert(window.localStorage['keyName1']);

}

//localStorage的遍历

 function hoop(){

    var storage=window.localStorage;

    var len=storage.length

    for(var i=0;i<len;i++){

       var key=storage.key(i); //获取的值key的值

       var value=storage.getItem(key);//利用key来获取值

       alert(value);

    }

 }

 //居然没触发这个事件，可见兼容性有待....(好像没出发滴呀)

 window.onload=function (){

    if(window.addEventListener){

        window.addEventListener("storage",handle_storage,false);

    }else if(window.attachEvent){

        window.attachEvent("onstorage",handle_storage);

    }

 }

 function handle_storage(e){

     if(!e) {

        e=window.event;

     }

     alert('event fuck');

 }

码农公寓

相关文章