存储
- 题目
- 知识点
- 解答
题目
描述 coolkie localStorage sessionStorage 的区别
- 容量
- API 易用性
- 是否跟随 http 请求发送出去
相同点:
都存储在客户端
不同点:
(1).存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
(2).有效时间
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
(3). 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
知识点
coolkie
- 本身用于浏览器和 server 通讯
- 被 “借用” 到本地存储来
- 可用 document.cookie = ’ …’ 来修改
一、Cookie介绍
1、Cookie是一种在客户端保持Http状态信息的技术。
2、Cookie是再浏览器发文WEB服务器的某个资源时,由WEB服务器在HTTP响应消息头种附带传送给浏览器的一片数据,WEB服务器传送给各个客户端浏览器的数据是可以各不相同的。
3、一旦web浏览器保存了某个Cookie,那么它在以后每次访问该WEB服务器时,都应在HTTP请求头中将这个Cookie回传给web服务器。
4、Web服务器通过在Http响应消息中增加Set-Cookie响应头字段将Cookie信息发送给浏览器,浏览器则通过在Http请求消息中增加Cookie请求字段将Cookie回传给web服务器。
5、一个Cookie只能标示一种信息,它至少含有一个标识该信息的名称和设置值。
6、一个web站点可以给一个web浏览器发送多个Cookie,一个web浏览器也可以存储多个web站点提供的cookie。
7、浏览器一般只允许存放300个Cookie,每个 站点最多存放20个Cookie。
二、在Servlet程序中使用Cookie
Servlet API中提供了一个jacax.servlet.http.Cookie类来封装Cookie信息,它包含有生成Cookie信息和提取Cookie信息的各个属性的方法。
三、Cookie类的方法:
getName方法
setValue与getValue方法
steMaxAge与gteMaxAge方法
SetPath与getPath方法
setDomain与getDomain方法
setVersion与getVersion方法
setComment与getComment方法
setSecure与getSecure方法
cookie 的缺点
- 存储大小,最大 4KB
- http 请求时需要发送到服务,增加请求数据量
- 只能用 document.cookie = ’ …’ 来修改, 太过简陋
localStorage sessionStorage
- HTML5 专门为存储而设计,最大可存 5M
- API 简单易用 setItem getItem
- 不会随着 http 请求被发送出去
- localStorage 数据会永久存储,除非代码或手动删除
- seaaionStorage 数据只存在当前会话,浏览器关闭则清空
- 一般用 localStorage 会更多一些
一、什么是localStorage、sessionStorage
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
二、localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
这里我们以localStorage来分析
三、localStorage的使用
localStorage的浏览器支持情况:
这里要特别声明一下,如果是使用IE浏览器的话,那么就要UserData来作为存储,这里主要讲解的是localStorage的内容,所以userData不做过多的解释,而且以博主个人的看法,也是没有必要去学习UserData的使用来的,因为目前的IE6/IE7属于淘汰的位置上,而且在如今的很多页面开发都会涉及到HTML5\CSS3等新兴的技术,所以在使用上面一般我们不会去对其进行兼容
首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性
if(!window.localStorage){
alert("浏览器支持localstorage");
return false;