认识达内从这里开始

我们在访问网页的时候大多都是通过不同的浏览器来访问网页的，而本文我们就通过案例分析来简单了解一下，浏览器存储功能都有哪些类型。

1.Cookie

Cookie是纯文本格式，不包含任何可执行的代码信息，伴随着用户请求在Web服务器和浏览器之间传递;

Cookie本质上属于http的范畴，因为http协议本身是无状态的，服务端是没有办法区分请求来自于哪个客户端，即便是来自于同一个客户端的多次请求，服务端也无法进行区分。所以引入了Cookie去维持客户端的状态(比如每个账号的购物车状态都不一样)。

Cookie的生成方式

客户端生成：

在JavaScript中通过document.cookie属性，你可以创建、维护和删除Cookie;设置document.cookie属性的值并不会删除存储在页面中的所有Cookie，它只简单的创建或修改字符串中指定的Cookie。

服务端生成：

Web服务器通过在HTTP响应头中添加Set-Cookie字段来创建一个Cookie，可以在该字段中添加HttpOnly属性禁止JavaScript脚本访问Cookie，以此来避免跨域脚本(XSS)攻击。

Cookie的缺陷

安全性：由于Cookie在HTTP中是明文传递的，其中包含的数据都可以被他人访问，出现篡改、盗用等问题;

大小限制：Cookie的大小限制在4KB左右，若要做大量存储显然不是理想的选择;

增加流量：因为Cookie是绑定域名对应的服务器的，所以对同一个域名的每次请求都会在RequestHeader中带上Cookie。

一方面：增加对服务器的请求时间;

另一方面：导致大部分不需要用到Cookie信息的场合下流量的浪费;这样浏览器对同一域名的每一次请求都会多出4KB流量，对于大型网站来说这是很大的损耗。

因此要慎用Cookie，不要在Cookie中存储重要和敏感的数据。

Cookie性能优化的方法

将存放静态资源的CDN服务器域名与主站的域名独立开来。这样每次请求静态文件的时候就不需要携带Cookie，从而可以节省很多流量。

2.WebStorage

WebStorage分为SessionStorage和LocalStorage专门用于客户端浏览器的本地存储，同时空间比Cookie大很多，一般支持5-10M;

浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制;

LocalStorage

LocalStorage是HTML5设计出来专门用于存储浏览器信息的：

大小为5~10M左右;

仅在客户端中使用，不和服务端进行通信;

接口封装较好，提供了js进行读写等操作的API;

采用浏览器本地缓存方案，可直接使用浏览器本地缓存，提升网页渲染的速度;

3.IndexedDB

IndexedDB是浏览器提供的一种API，用于存储客户端中大量的结构化数据。该API使用索引来实现对数据的高性能搜索。虽然WebStorage对于存储较少量的数据时很有用(采用key/value的方式)，但对于存储更大量的结构化数据来说，还是IndexedDB表现更加优异。

IndexedDB的应用

为应用创建离线版本;

可以在浏览器中打印indexedDB对象：

4.PWA

PWA(ProgressiveWebApps)是一种WebApp新模型(标准)，并不是具体指某一种前沿的技术或者某一个单一的知识点。从英文缩写就能看出，这是一个渐进式的WebApp，是通过一系列新的Web特性，配合优秀的UI交互设计，逐步增强用户的体验;

PWA的要求

可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现"未连接到互联网"的情况;

快速：针对网页渲染及网络数据访问有较好优化;

融入(Engaging)：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性;

5.ServiceWorker

ServiceWorker是一个脚本，可以使浏览器独立于当前网页，在后台运行。为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在未来这些特性将包括推送信息，背景后台同步，geofencing(地理围栏定位)等它将推出的一个要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的响应。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。