zoukankan      html  css  js  c++  java
  • sessionstorage,localstorage和cookie之间的区别以及各自的用法

    由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别

    当然,在面试的时候答的也不是很完善,所以想整理一下,以便后续面试中遇到。

    区别:

    1,cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。

    2,存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

    3,数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

    4,作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

    在服务器端存储数据经常用session,所以经常也遇到这样的问题:cookie 和session 的区别

     

    1、cookie数据存放在客户的浏览器上,session数据放在服务器上。

    2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
       考虑到安全应当使用session。

    3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
       考虑到减轻服务器性能方面,应当使用COOKIE。

    4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

    知道这些区别以后,还得知道他们的用法:

    cookie的用法:

    在这里我们使用jquery封装的方法。所以先得引入两个js

    首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件。 

    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 

    <script type="text/javascript" src="js/jquery.cookie.js"></script> 

    使用方法 

    创建一个会话cookie:

    $.cookie(‘cookieName’,'cookieValue’);

    注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie。

    创建一个持久cookie:

    $.cookie(‘cookieName’,'cookieValue’,{expires:7});

    注:当指明时间时,故称为持久cookie,并且有效时间为天。

    创建一个持久并带有效路径的cookie:

    $.cookie(‘cookieName’,'cookieValue’,{expires:7,path:’/'});

    注:如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。

    创建一个持久并带有效路径和域名的cookie:

    $.cookie(‘cookieName’,'cookieValue’,{expires:7,path:’/',domain: ‘chuhoo.com’,secure: false,raw:false});

    注:domain:创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为false,读取和写入时候自动进行编码和解码(使用encodeURIComponent编码,使用decodeURIComponent解码),关闭这个功能,请设置为true。


    4.读取cookie: 

    $.cookie('the_cookie'); // cookie存在 => 'the_value' 

    $.cookie('not_existing'); // cookie不存在 => null 

    5.删除cookie,通过传递null作为cookie的值即可: 

    $.cookie('the_cookie', null); 

    localStorage和sessionStorage的用法

    1,保存数据:localStorage.setItem(key,value); 

    sessionStorage.setItem("key", "value");
    localStorage.setItem("site", "js8.in");

    2,读取数据:localStorage.getItem(key) ;

    var value = sessionStorage.getItem("key"); 
    var site = localStorage.getItem("site");

    3,删除数据:删除数据:localStorage.removeItem(key)

    sessionStorage.removeItem("key"); 
    localStorage.removeItem("site");

    4,clear清除所有的key/value:clear();

    sessionStorage.clear(); 
    localStorage.clear();

    5,获取localStorage的属性名称(键名称):localStorage.key(index)。

    6,获取localStorage中保存的键值对的数量:localStorage.length。

     

     

    
    
  • 相关阅读:
    java web项目打包.war格式
    version 1.4.2-04 of the jvm is not suitable for thi
    Sugarcrm Email Integration
    sharepoint 2010 masterpage中必须的Content PlaceHolder
    微信开放平台
    Plan for caching and performance in SharePoint Server 2013
    使用自定义任务审批字段创建 SharePoint 顺序工作流
    Technical diagrams for SharePoint 2013
    To get TaskID's Integer ID value from the GUID in SharePoint workflow
    how to get sharepoint lookup value
  • 原文地址:https://www.cnblogs.com/carrywang/p/6397648.html
Copyright © 2011-2022 走看看