原文:http://blog.csdn.net/lxcao/article/details/52809939

相同点:都存储在客户端
不同点:

1.存储大小

  • cookie数据大小不能超过4k。
  • sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

2.有效时间

  • localStorage    存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  • sessionStorage  数据在当前浏览器窗口关闭后自动删除。
  • cookie          设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

  • cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

----------------------------------------------------------------------------------------------------------------------------------------

额外拓展【加分项】:Cookie的操作(有点小难度)防止面试官细问cookie的操作。

设置Cookie

cookie的几个要素

cookie的内容:采用 key=value;key=value……存储,参数名自定义

cookie的过期时间:使用参数expires

cookie的路径:使用参数path,"/"表示这个网站的页面,不推荐!容易产生冲突

注意:形如“/pro/index.html”路径,在google浏览器正常,在IE浏览器得不到值

cookie的表示方式示例

  1. var name = "jack";
  2. var pwd = "123";
  3. var now = new Date();
  4. now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒
  5. var path = "/";//可以是具体的网页
  6. document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名
  7. document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码

读取cookie

获取cookie内容

  1. vardata=document.cookie;//获取对应页面的cookie

解析cookie

方式1:截取字符串

  1. function getKey(key) {
  2. var data = document.cookie;
  3. var findStr = key + "=";
  4. //找到key的位置
  5. var index = data.indexOf(findStr);
  6. if (index == -1)
  7. return null;
  8. var subStr = data.substring(index +findStr.length);
  9. var lastIndex = subStr.indexOf(";");
  10. if (lastIndex == -1) {
  11. return subStr;
  12. } else {
  13. return subStr.substring(0,lastIndex);
  14. }
  15. }

方式2:使用正则表达式+JSON

  1. function getKey(key) {
  2. return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
  3. }

清除cookie

  1. var name = null;
  2. var pwd = null;
  3. var now = new Date();
  4. var path = "/";//可以是具体的网页
  5. document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名
  6. document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码

请描述一下 cookies,sessionStorage 和 localStorage 的区别的更多相关文章

  1. 关于cookies,sessionStorage和localStorage的区别

    如果我说得啰嗦了,请麻烦提醒我一下~~ 面试的时候说: 首先这三个可以在浏览器端按下F12,在Application可以查看到. 如下图: cookies: sessionStorage: sessi ...

  2. 前端面试01:描述一下cookices sessionStorage 和 localStorage 的区别

    相同点:都可以存储在客户端 不同点: 1.存储大小 cookie数据大小不能超过4K. sessionStorage 和 localStorage 虽然也有大小限制,但是比cookie大得多,可以达到 ...

  3. cookies,sessionStorage和localStorage的区别

    联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...

  4. 7,请描述下cookies,sessionStorage和localStorage的区别

    7,请描述下cookies,sessionStorage和localStorage的区别 首先,cookie是网站为了标识用户身份而储存在用户本地终端(client side,百科: 本地终端指与计算 ...

  5. cookies,sessionStorage 和 localStorage 的区别

    请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...

  6. cookies、sessionStorage和localStorage的区别

    cookies.sessionStorage和localStorage的区别 对比 特性 Cookie LocalStorage SessionStorage 数据的生命周期              ...

  7. 请描述一下 cookies,sessionStorage和localStorage的区别?

    cookie在浏览器和服务器间来回传递. sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大:sessionStorage和 ...

  8. 请描述一下cookies、sessionStorage、localStorage、session四者的区别?

    存储大小: cookie在4K以内. sessionStorage和localStorage在5M以内. 有效时间: cookie:如果未设置过期时间,关闭浏览器时清空:如果设置了有效时间则在到期后清 ...

  9. 描述一下 cookies,sessionStorage 和 localStorage 的区别

    cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密),数据会在浏览器和服务器间来回传递.sessionStorage和localStorage不会自 ...

随机推荐

  1. JavaScript函数、对象和数组

    一.JavaScript函数 1.定义函数:函数的通用语法如下 function function_name([parameter [, ...]]) { statements; } 由关键字func ...

  2. JDBC用户访问被拒绝

    线程“主”java中的异常.于sq1.sQLException:用户“root”@“localhost”被拒绝访问(使用密码:YES)root密码错误

  3. KMP小扩展,找出子串在主串中出现的所有位置

    KMP算法能够高效地匹配字符串,找出子串(T串)在主串(S串)中出现的首个位置的原算法网上已经有很多优秀的博文进行详细讲解,这里就不多赘述. 这篇博文主要是对KMP原算法稍作改动,使其能够在主串中把所 ...

  4. JavaScript的jQuery

    JavaScript的jQuery 不通过JavaScript的原生代码,如document.getElementById("") 而是通过jQuery的$符号选择器. jQuer ...

  5. document.getElementById("id").value与$("#id").val()之间的区别

    本文链接:https://blog.csdn.net/mottohlm/article/details/78364196....今天在项目中遇到这么一个JS报错:原因是代码中有这么一段:对,就是var ...

  6. 配置本地https

    参考 https://juejin.im/post/5a6db896518825732d7fd8e0 https://juejin.im/post/590ec765a22b9d0058fcfaa5 比 ...

  7. mybatis(六):设计模式 - 组合模式

  8. Java-POJ1013-Counterfeit Dollar

    在13枚硬币中找出fake的那一个 输入:三次天平称量结果 package poj.ProblemSet; import java.util.Scanner; /* 我怎么觉得是贪心算法呢? 起初对所 ...

  9. 题解【洛谷P1645/CJOJ1244】序列

    P1645 序列 Description 有一个整数序列,它的每个数各不相同,我们不知道它的长度(即整数个数),但我们知道在某些区间中至少有多少个整数,用区间(Li,Ri,Ci)来描述,表示这个整数序 ...

  10. How To Use These LED Garden Lights

    Are you considering the lighting options for the outdoor garden? Depending on how you use it, LED ga ...