网络大杂烩首页

网络大杂烩

  • 网站首页
  • HTML/CSS
  • javascript
  • seo优化
  • PS美工
  • 系统安全
  • 漏洞预警
  • 编程学习
  • 原创专区
  • 【网络大杂烩】是一家综合技术门户,为您提供网站建设,编程开发,安全维护,漏洞预警等技术文章

    技术文章MAP

    文章

    Window localStorage 属性、sessionStorage和localStorage解释及区别

    日期:2019/12/11 13:38:00来源分类:系统安全

    浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。

    一、cookie和session

    cookie和session都是用来跟踪浏览器用户身份的会话方式。

    区别:

    1、保持状态:cookie保存在浏览器端,session保存在服务器端

    2、使用方式:

    (1)cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。

         Cookie是服务器发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它

    (2)session机制:当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后。

    3、存储内容:cookie只能保存字符串类型,以文本的方式;session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)

    4、存储的大小:cookie:单个cookie保存的数据不能超过4kb;session大小没有限制。

    5、安全性:cookie:针对cookie所存在的攻击:Cookie欺骗,Cookie截获;session的安全性大于cookie。

          原因如下:(1)sessionID存储在cookie中,若要攻破session首先要攻破cookie;

               (2)sessionID是要有人登录,或者启动session_start才会有,所以攻破cookie也不一定能得到sessionID;

               (3)第二次启动session_start后,前一次的sessionID就是失效了,session过期后,sessionID也随之失效。

               (4)sessionID是加密的

               (5)综上所述,攻击者必须在短时间内攻破加密的sessionID,这很难。

    6、应用场景:

    cookie:(1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。

        (2)保存上次登录的时间等信息。

        (3)保存上次查看的页面

        (4)浏览计数

    session:Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。

      (1)网上商城中的购物车

      (2)保存用户登录信息

      (3)将某些数据放入session中,供同一用户的不同页面使用

      (4)防止用户非法登录

     7、缺点:cookie:(1)大小受限

            (2)用户可以操作(禁用)cookie,使功能受限

            (3)安全性较低

            (4)有些状态不可能保存在客户端。

            (5)每次访问都要传送cookie给服务器,浪费带宽。

            (6)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。

         session:(1)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。

            (2)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全

            (3)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。

     HTML5的本地存储

    解释一

    HTML5中与本地存储相关的两个重要内容:Web Storage与本地数据库。其中,Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能,使用它可以在客户端本地建立一个数据库,原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了,这大大减轻了服务器端的负担,同时也加快了访问数据的速度。

    本文主要来讲解Web Storage

    我们知道,在HTML4中可以使用cookie在客户端保存诸如用户名等简单的用户信息,但是,通过长期的使用,你会发现,用cookie存储永久数据存在以下几个问题:

    1.大小:cookie的大小被限制在4KB。

    2.带宽:cookie是随HTTP事务一起被发送的,因此会浪费一部分发送cookie时使用的带宽。

    3.复杂性:要正确的操纵cookie是很困难的。

    针对这些问题,在HTML5中,重新提供了一种在客户端本地保存数据的功能,它就是Web Storage。

    具体来说,Web Storage又分为两种:

    1.sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

    2.localStorage:将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。

    这两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。

    到目前为止,Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的浏览器支持sessionStorage与localStorage的使用。


    使用 localStorage 创建一个本地存储的 name/value 对,name="lastname" value="Smith", 然后检索 "lastname" 的值,并插入到 id="result" 的元素上:

    // 存储
    localStorage.setItem("lastname", "Smith");
    // 检索
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");

    尝试一下 »
    定义和使用
    localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

    localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

    localStorage 属性是只读的。

    提示: 如果你只想将数据保存在当前会话中,可以使用 sessionStorage 属性, 改数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

    浏览器支持
    表格中的数字表示支持该属性的第一个浏览器版本号。

    属性     
    localStorage 4.0 8.0 3.5 4.0 11.5
    语法
    window.localStorage
    保存数据语法:

    localStorage.setItem("key", "value");
    读取数据语法:

    var lastname = localStorage.getItem("key");
    删除数据语法:

    localStorage.removeItem("key");
    技术细节
    返回值: 一个存储对象
    更多实例
    实例
    以下实例用于记录点击按钮的次数:

    if (localStorage.clickcount) {
        localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
        localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "你在按钮上已经点击了 " +
    localStorage.clickcount + "次。";

    随机推荐

    • 该分类还没有添加任何内容!
    • 该分类还没有添加任何内容!

    Copyright 2005-2019 【网络大杂烩】 版权所有 黑ICP备16886888号

    声明:本站所有文章来自互联网 如有异议 请联系本站管理员