• cookie、session、localstorage


    最早的Cookies问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。cookie的内容主要包括:名字,值,过期时间,路径和域。路径与域一起构成cookie的作用范围。
    一、cookie机制和session机制的区别
      具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。
      同时我们也看到,由于在服务器端保持状态的方案在客户端也需要保存一个标识,所以session机制可能需要借助于cookie机制来达到保存标识的目的,但实际上还有其他选择。
    二、会话cookie和持久cookie的区别
      如果不设置过期时间,则表示这个cookie生命周期为浏览器会话期间,只要关闭浏览器窗口,cookie就消失了。这种生命期为浏览会话期的cookie被称为会话      cookie。会话cookie一般不保存在硬盘上而是保存在内存里。
      如果设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie依然有效直到超过设定的过期时间。
      存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存的cookie,不同的浏览器有不同的处理方式。
     
    cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。
    三、设置cookie
    1、每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:document.cookie="userId=828";
    2、如果要一次存储多个名/值对,可以使用分号加空格(; )隔开:document.cookie="userId=828; userName=hulk";
    3、主机名是指同一个域下的不同主机,例如:www.google.com和gmail.google.com就是两个不同的主机名。默认情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制:document.cookie="name=value;domain=.google.com";
    这样,所有google.com下的主机都可以访问该cookie。
    4、给cookie设置终止日期,未设置终止日期,所有的cookie都是单会话cookie,即浏览器关闭后这些cookie将会丢失,事实上这些cookie仅仅是存储在内存中,而没有建立相应的硬盘文件。
    document.cookie="userId=828; expiress=GMT_String";
     
    Session的生命周期 
      Session存储在服务器端,一般为了存储在服务器的内存中(为了高速存取),Sessinon在用户访问第一次访问服务器时创建,需要注意只有访问JSP、Servlet等程序时才会创建Session,只访问HTML、IMAGE等静态资源并不会创建Session,可调用request.getSession(true)强制生成Session。

      Session什么时候失效?

      1. 服务器会把长时间没有活动的Session从服务器内存中清除,此时Session便失效。Tomcat中Session的默认失效时间为20分钟。

      2. 调用Session的invalidate方法。

      Session对浏览器的要求:

      虽然Session保存在服务器,对客户端是透明的,它的正常运行仍然需要客户端浏览器的支持。这是因为Session需要使用Cookie作为识别标志。HTTP协议是无状态的,Session不能依据HTTP连接来判断是否为同一客户,因此服务器向客户端浏览器发送一个名为JSESSIONID的Cookie,它的值为该Session的id(也就是HttpSession.getId()的返回值)。Session依据该Cookie来识别是否为同一用户。

    localStorage支持的情况如上图
    在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。
     
    if(window.localStorage){
     alert('This browser supports localStorage');
    }else{
     alert('This browser does NOT support localStorage');
    }
     
    存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
     
    localStorage.a = 3;//设置a为"3"
    localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
    localStorage.setItem("b","isaac");//设置b为"isaac"
    var a1 = localStorage["a"];//获取a的值
    var a2 = localStorage.a;//获取a的值
    var b = localStorage.getItem("b");//获取b的值
    localStorage.removeItem("c");//清除c的值
     
    这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:
     
    var storage = window.localStorage;
    function showStorage(){
     for(var i=0;i<storage.length;i++){
      //key(i)获得相应的键,再用getItem()方法获得对应的值
      document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
     }
    }
    需要注意的是,HTML5本地存储只能存字符串
     
    HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用方法如下:
     
    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;}
     //showStorage();
    }
     
    对于事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察键值对的变化,如下表:
    目前浏览器对这个支持不太好,仅iPad和Firefox支持,而且Firefox支持得乱糟糟,e对象根本没有那些属性。iPad支持非常好,用的是e.uri(不是e.url),台式机上的Safari不行,诡异。
     
    目前javascript使用非常多的json格式,如果希望存储在本地,可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式
     
  • 相关阅读:
    Beta冲刺——星期四
    Beta冲刺——星期三
    团队学期总结
    Beta版本发布
    第三天Beta冲刺
    第二天Beta冲刺
    第一天Beta冲刺
    个人作业——Alpha项目测试
    第四次团队作业
    第三次团队作业
  • 原文地址:https://www.cnblogs.com/chenlogin/p/4740045.html
Copyright © 2020-2023  润新知