面试题 存储

存储

• 题目
• 知识点
• 解答

题目

描述 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")