美文网首页
cookie / web Storage

cookie / web Storage

作者: Iswine | 来源:发表于2016-12-22 21:59 被阅读0次

    cookie与web Storage都是客户端(浏览器)中存储数据的方式。客户端存储用户信息的需求十分普遍,例如:用户无需重复登录某网站,同时网站也能“记住”用户的一些偏好。

    cookie

    由于HTTP是无状态协议,通过协议来保存用户信息的想法是无法实现的。所以,人们在客户端/服务端通信报文中加了一个“小尾巴”。客户端第一次发送请求,服务端报以响应并加了一个cookie;客户端第二次请求时就会附带这一个cookie,服务端便“认识”了这个请求是上个客户端发的,从而简化了一些需要向客户端确认的事情(登录信息等等)。

    cookie的构成:
    • 名称:cookie的名字,需要URL编码;
    • :存储在cookie中的值,需要URL编码;
    • :确定cookie所适用的域名,客户端所有向该域发送的请求中都会包含这条cookie。
    • 路径:指定域中的某一路径才会发送cookie。指定路径后,同域不同路径将不会发送cookie。
    • 失效时间:即字面意思。设置的时间格式为GMT(Wdy,DD-Mon-YY HH:MM:SS GMT)。不进行设置,则失效时间为关闭浏览器后。
    • 安全标志:指定后,cookie只有使用了 SSL连接时才会发送到服务器。此时,使用https能够发送cookie,而http就不能发送了。

    所以,cookie在HTTP请求中的构成如下:

    HTTP/1.1 200 OK
    Content-type:text/html
    Set-cookie:name1=value1[; expries = GMT][; domain=" "][; path=" "][; secure]
    Set-cookie:name2=value2[; expries = GMT][; domain=" "][; path=" "][; secure]
    --------------------其它报文----------------------
    
    cookie的限制:
    • 同源:请求只有发送至指定域名时才会携带cookie,当然有一些hack方法是能够跨域的;
    • 数量限制:同域名下cookie的数量是有限制的,每个浏览器的上限不太一样,一般在20~50个左右。有一个方式可以绕过这种限制:name=name1=value1&name2=value2&name3=value3,用这种方法可以骗过浏览器,但是不要过长。
    • 尺寸限制:大多数浏览器将cookie限制在4096B,所以不要设置过长的cookie。
    JavaScript中的cookie API:

    JS是通过BOM的document.cookie来对cookie进行操作的。

    • 查找doucument.cookie可以直接获取网页中已经存在的cookie字符串,其格式为:"name1=value1;name2=value2;name3=value3"
    • 添加:通过document.cookie = "name=value[; expries = GMT][; domain=" "][; path=" "][; secure]"能够为该页面添加cookie。若name不同则添加一个新的name作为新的cookie,若name相同则覆盖原来的cookie。
      BUT!cookie的namevalue需要通过URL编码,所以使用encodeURIcomponent()来进行编码,所以正确的形式应该是:
      document.cookie = encodeURIcomponent(name) + "=" + encodeURIcomponent(value) + "; domain=abc.com ;path=/ ; secure"

    • 删除:没有直接删除cookie的方法,所以一般用覆盖或是设置失效时间的方式来删除不再需要的cookie。

    总的来说,需要围绕document.cookie再次封装才能更好的使用cookie。但是把cookie暴露在公共环境中是很容易被XSS注入后获取的,可以设置cookie为HTTPOnly来避免被document.cookie直接获取。

    Web存储

    Web存储是HTML5规范中的新功能,其目的是为了提供一种区别于cookie能够存储大量数据的机制。
    所有的Web存储是围绕着Storage这个构造函数来操作的:

    Storage函数为页面创建了两个对象实例:sessionStorage/localStorage,将数据存储于实例中保存至浏览器本地,区别于cookie,它不需要在客户端与服务端之间来回通信,同时它将数据规模最大拓展至5MB(根据不同浏览器,略有不同)。Storage函数的方法如下:

    • clear():删除所有值;
    • getItem(name):根据指定的名字获取值;
    • key(index):获取index所在的name;
    • removeItem(name):删除该name的信息;
    • setItem(name,value):为指定的name设置一个值。

    当然,也可以用对象/属性的方法来增删改查;

    sessionStorage与localStorage这两个实例对象的差异在于:

    • sessionStorage的失效时间为浏览器关闭后,而localStorage是永久保存;
    • 两者虽然都是同源(不同于cookie,子域都不能跨越),sessionStorage更为严格,即使为相同域名,在相同浏览器中打开新页面的方式也不能让sessionStorage的数据传递。

    此外,Storage提供事件监听,这个事件的event事件拥有四个属性:

    • domain:操作的域名;
    • key:操作的name;
    • newValue:如果是设置值,则为新值;若是删除,则为null;
    • oldValue:更改之前的值。

    相关文章

      网友评论

          本文标题:cookie / web Storage

          本文链接:https://www.haomeiwen.com/subject/jfkvmttx.html