Web前端面试指导(四十三):请描述一下 cookies,sessionStorage 和 localStorage 的区别?
来源:互联网 发布:mac钥匙串在哪 编辑:程序博客网 时间:2024/06/06 12:51
题目点评
这是一种对比性比较强的问题,可以先说他们的相同点,然后就是要详细阐述他们的不同点,而不同点不要刻意去对比,只要说出各自的特点,自然他们的不同点就出来了。解决方法
相同点:都存储在客户端
不同点:
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的表示方式示例
var name = "jack";var pwd = "123";var now = new Date();now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒var path = "/";//可以是具体的网页document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码
读取cookie
获取cookie内容
vardata=document.cookie;//获取对应页面的cookie解析cookie
方式1:截取字符串
function getKey(key) { var data = document.cookie; var findStr = key + "="; //找到key的位置 var index = data.indexOf(findStr); if (index == -1) return null; var subStr = data.substring(index +findStr.length); var lastIndex = subStr.indexOf(";"); if (lastIndex == -1) { return subStr; } else { return subStr.substring(0,lastIndex); }}方式2:使用正则表达式+JSON
function getKey(key) { return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];}
清除cookie
var name = null;var pwd = null;var now = new Date();var path = "/";//可以是具体的网页document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码
1 1
- Web前端面试指导(四十三):请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 描述cookies、sessionStorage和localStorage的区别。
- 描述cookies,sessionStorage和localStorage的区别
- 请描述一下cookie、sessionStorage、localStorage的区别。
- 前端面试题:cookies,sessionStorage 和 localStorage 的区别?
- cookies和localStorage和sessionStorage的区别
- cookies、sessionStorage和localStorage的区别
- Cookies,SessionStorage 和 LocalStorage 的区别
- cookies,sessionStorage 和 localStorage 的区别
- 基于VTK的MFC应用程序开发(2)
- Windows 7 与 Linux 的双系统安装
- POI检索
- TCP的流量控制与拥塞控制
- 基于VTK的MFC应用程序开发(3)
- Web前端面试指导(四十三):请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- OpenSSL数字签名测试
- (二)面向对象之封装,继承,多态(上)
- 流分类(部分)
- 搬家啦!!!
- Vertor向量容器
- "ORA-00942: 表或视图不存在 "的原因和解决方法
- Codeforces 722C. Destroying Array
- 5.7.13 mysql 登录root用户及修改root用户密码