【HTML5】刷题（一）

• Cookie、localStorage、sesstionStorage、Session |  浏览器本地存储  | html5的web storage

 

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。

 

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

 

特性	Cookie	localStorage	sessionStorage	Session
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。	用于本地存储一个会话（ session ）中的数据，这些数据只有在同一个会话中的页面才能访问，仅在当前会话下有效，会话结束后数据随之销毁。 不是一种持久化的本地存储，仅仅是会话级别的存储。	安全
存放数据大小	支持数据存储量相对较少，每个 domain 最多只能有 20 条 cookie ，每个 cookie 长度不能超过 4KB ，否则会被截掉   Cookie的大小是受限的，并且每次请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。	为了更大容量存储设计的，一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
存储位置	客户端			服务端
跨页	可跨页，不可跨域		不可跨页，不可跨域	可跨页，不可跨
备注	存在安全性问题，如果被拦截，就可以取得所有的 session 信息。	不能给 localStorage 指定任何规则，要访问同一个 localStorage ，页面必须使用同一个域名，使用同一种协议，在同一个端口上。   容量大、易用、强大、原生支持     a) 兼容性差（ Chrome,  Safari, Firefox,Opera,IE8+ 支持 ， IE8 以下版本不支持）   b) 安全性差（所以请勿使用 localStorage 保存敏感信息）

 

---

 

• Cookie的优缺点

优点： 极高的扩展性和可用性

1) 数据持久性。持久保存客户端数据，分担了服务器存储的负担

2) 不需要任何服务器资源。 Cookie 存储在客户端并在发送后由服务器读取。

3) 可配置到期规则。 控制 cookie 的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的 cookie 。

4) 简单性。 基于文本的轻量结构。

5) 通过良好的编程，控制保存在 cookie 中的 session 对象的大小。

6) 通过加密和安全传输技术（ SSL ），减少 cookie 被破解的可能性。

7) 只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失。

 

缺点：

1) Cookie 数量和长度的限制 。

数量：每个特定的域名下最多生成 20 个 cookie。

a) IE6 或更低版本最多 20 个 cookie

b) IE7 和之后的版本最后可以有 50 个 cookie

c) Firefox 最多 50 个 cookie

d) chrome 和 Safari 没有做硬性限制

长度：每个 cookie 长度不超过 4KB （ 4096B ），否则会被截掉。

2) 潜在的安全风险 。 Cookie 可能被拦截、篡改。如果 cookie 被拦截，就有可能取得所有的 session 信息。

3) 用户配置为禁用 。有些用户禁用了浏览器或客户端设备接受 cookie 的能力，因此限制了这一功能。

4) 有些状态不可能保存在客户端 。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

5）增加开销，造成资源浪费：cookie在每次发起HTTP请求的时候都会被发送给服务器 ，一些不需要的信息也有可能会被发送

 

---

 

•  Http请求返回码（status code）

HTTP状态码分类

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

 

HTTP状态码列表

状态码	状态码英文名称	中文描述
100	Continue	继续。客户端应继续其请求
101	Switching Protocols	切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源
202	Accepted	已接受。已经接受请求，但未处理完成
203	Non-Authoritative Information	非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204	No Content	无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205	Reset Content	重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206	Partial Content	部分内容。服务器成功处理了部分GET请求
300	Multiple Choices	多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303	See Other	查看其它地址。与301类似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305	Use Proxy	使用代理。所请求的资源必须通过代理访问
306	Unused	已经被废弃的HTTP状态码
307	Temporary Redirect	临时重定向。与302类似。使用GET请求重定向
400	Bad Request	客户端请求的语法错误，服务器无法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留，将来使用
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405	Method Not Allowed	客户端请求中的方法被禁止
406	Not Acceptable	服务器无法根据客户端请求的内容特性完成请求
407	Proxy Authentication Required	请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408	Request Time-out	服务器等待客户端发送的请求时间过长，超时
409	Conflict	服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410	Gone	客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411	Length Required	服务器无法处理客户端发送的不带Content-Length的请求信息
412	Precondition Failed	客户端请求信息的先决条件错误
413	Request Entity Too Large	由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414	Request-URI Too Large	请求的URI过长（URI通常为网址），服务器无法处理
415	Unsupported Media Type	服务器无法处理请求附带的媒体格式
416	Requested range not satisfiable	客户端请求的范围无效
417	Expectation Failed	服务器无法满足Expect的请求头信息
500	Internal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持请求的功能，无法完成请求
502	Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503	Service Unavailable	由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求
505	HTTP Version not supported	服务器不支持请求的HTTP协议的版本，无法完成处理

 

---

 

• HTML页面加载时触发的事件

1. 　　开始解析HTML文档结构
2. 　　加载外部样式表及JavaScript脚本
3. 　　解析执行JavaScript脚本
4. 　　DOM树渲染完成
5. 　　加载未完成的外部资源（如 图片）
6.        页面加载成功

 

---

 

 

• 脚本<script>放在<head>、脚本<script>放到<body>底部的区别

放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。
放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。
例外情况：脚本中没有访问<body>元素的情况下，两种加载方式效果一致。

 

---