浏览器数据存储方式总结

时间  2019-11-08
标签 浏览器 数据 存储 方式 总结 栏目 浏览器 繁體版
原文   原文链接

　　今天主要来说下前端的数据存储，提及数据存储，你们确定第一时间想起cookie，localstorage，sessionstorage，而其实还有userData和IndexedDB这两种数据存储，接下来将对它们进行一个比较详细的总结css

 

1、为何要进行数据存储html

　　随着Web应用程序的出现，慢慢的也开始产生了对于可以直接在客户端上存储用户信息能力的要求，咱们知道当咱们访问某个页面的时候，不少东西都须要从服务器端进行加载，若是这个时候能将一些东西存储在客户端的话，是否是就能够直接拿来用啦，方便快捷，速度又快，又能够节省了不少没必要要的请求，为何不用呢？前端

　　其实在我实习的时候，曾经作过一个功能，当某条广告更新的时候右上角出现小红点，用户点击事后就不出现小红点，直到广告更新的时候小红点再出现，这个功能当时我就用到了客户端数据存储来实现啦，其实像一些登陆信息，偏好设定均可以存储在客户端，而首先进行客户端存储的方案就是cookie，而今天，cookie只是在客户端存储数据的其中一种方式，接下来，咱们将介绍各类客户端的数据存储方式html5

 

2、cookie数据库

一、cookie的做用　　跨域

　　说到cookie，其实cookie有两个主要功能，第一个功能就是用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态，而第二个功能也就是咱们如今也常用cookie在客户端存储一些其它的数据浏览器

 

二、cookie的构成缓存

　　通常来讲，cookie是由浏览器保存的如下几块信息构成的安全

　　（1）名称：一个惟一肯定cookie的名称服务器

　　（2）值：存储在cookie中的字符串值，值必须被URL编码

　　（3）域：cookie对于哪一个域是有效的，全部向该域发送的请求都会包含这个cookie信息

　　（4）路径：对于指定域中的路径，应该向服务器发送cookie

　　（5）失效时间：表示cookie什么时候应该被删除的时间戳

　　（6）安全标志：指定后，cookie只有在使用SSL链接的时候才发送到服务器

 

三、如何使用cookie存储数据

　　通常来讲，有两种方式能够生成cookie，一种是服务器发送http响应时指定Set-Cookie进行指定，另外一种咱们能够使用js生成cookie

　　因为cookie须要经过URL编码，所以在写入cookie时和读取cookie时咱们都须要进行编码和解码操做，为了方便，咱们能够本身写一个cookie的操做对象

var CookieUtil = {
    get: function(name) {
        var cookieName = encodeURIComponent(name) + "=",
              cookieStart = document.cookie.indexOf(cookieName),
              cookieValue = null;
         
         if(cookieStart > -1) {
             var cookieEnd = document.cookie.indexOf(";", cookieStart);
             if (cookieEnd == -1) {
               cookieEnd = document.cookie.length;
             }
             cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
         }
         return cookieValue;
    },
    set: function(name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(valeu);
        if(expires instanceof Data) {
            cookieText += ";expires=" + expires.toGMTString();
        }
        if(path) {
            cookieText += ";path=" + path;
        }
        if(domain) {
            cookieText += ";domain=" + domain;
        }
        if(secure) {
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    }
    unset: function(name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
}

　　当咱们想在cookie存储一些数据，好比存储用户是否点击广告的状态，能够像下面这样设置

CookieUtil.set("ifClick", "true");

　　当咱们想判断用户是否点击了广告时，就须要从cookie拿出数据，能够像下面这样获取数据

CookieUtil.get("ifClick");

　　经过从cookie中获取出咱们存入的ifClick数据，咱们能够获得相应的值为true，好啦，这个广告用户已经点击了，不用显示小红点啦

 

四、cookie的缺点

　　虽然cookie能够存储一些数据，可是仍然存储下面一些缺点

　　（1）cookie须要在客户端和服务器端之间来回传送，会浪费没必要要的资源

　　（2）cookie的存储大小有限制，对于每一个域，通常只能设置20个cookie，每一个cookie大小不能超过4KB

　　（3）cookie的安全性，cookie由于保存在客户端中，其中包含的任何数据均可以被他人访问，cookie安全性比较低

 

3、IE用户数据

　　虽然H5中能够经过localstorage和sessionstorage进行数据存储，可是低版本的ie不支持呀，这可怎么办？为了在ie中存储数据，微软经过一个自定义行为引入了持久化用户数据的概念

一、什么是userData

　　userData是ie的一种数据存储方式，userData 存储经过将数据写入一个UserData存储区（UserData store）来保存数据，userData将数据以XML格式保存在客户端上，UserData存储方式只适用于IE浏览器，UserData存储区保存之后，即便IE浏览器关闭或者刷新了，下一次进入该页面，数据也可以从新载入而不会丢失，也就是数据将一直存在，除 非你人为删除或者用脚本设置了该数据的失效期

　　通常来讲，userData容许每一个文档最多保存128KB数据，每一个域名最多1MB数据，是否是会比cookie存储的数据要大呢？

 

二、如何使用userData存储数据

　　若是咱们想使用userData存储数据，首先必须使用css在某个元素上指定userData行为

<div style="behavior:url(#default#userData)" id="dataStore></div>

　　一旦该元素使用了userData行为，那么就可使用setAttribute()方法在上面保存数据了，为了将数据提交到浏览器缓存中，还必须调用save()方法并告诉它要保存到的数据空间的名字，数据空间名字能够彻底任意，仅用于区分不一样的数据集

var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("ifClick", "true");
dataStore.save("ClickInfo");

　　在上面的代码中，在使用setAttribute存储了数据以后，调用了save方法，指定了数据空间的名称ClickInfo，下一次页面载入后，可使用load方法指定一样的数据空间来获取数据

dataStore.load("ClickInfo");
dataStore.getAttribute("ifClick");

　　在上面的代码中，对load()的调用获取了ClickInfo数据空间里的全部信息，而且使数据能够经过元素访问，只有到载入确切完成以后数据才可使用，好啦，如今咱们又成功获取到了ifClick的值啦，ifClick的值为true，好啦，广告已经点击，不显示小红点

　　若是getAttribute()调用了不存在的名称或者是还没有载入的名称，则返回null，咱们也可使用removeAttribute()方法来删除某个数据

dataStore.removeAttribute("ifClick")；

 

三、userData的缺点

　　（1）userData只是针对ie的数据存储

　　（2）userData的访问限制和对cookie的访问限制同样，必须来自同一个域名，在同一个路径下，并使用与进行存储脚本一样的协议才能访问

　　（3）userData的数据也是不安全的，不能存放重要的信息

 

4、Web存储机制

　　接下来，咱们要说一下html5中的存储啦，主要是sessionStorage和localStrorage

一、什么是Web存储

　　Web Storage也是一种在客户端存储数据的一种机制，主要的目的是为了克服由cookie带来的一些限制，当数据须要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，而且能够存储大量的跨会话的数据

　　通常来讲，Web Storage包含了两种对象的定义，sessionStorage和globalStorage，而如今localStorage在修订过的html5规范中做为持久保存客户端数据的方案取代了globalStorage，接下来，让咱们看一下它们有什么区别啦

 

二、sessionStorage

（1）什么是sessionStorage

　　sessionStorage对象是存储特定于某个会话的数据，也就是数据只保存到浏览器关闭，这个对象就像会话cookie，也会在浏览器关闭后消失，存储在sessionStorage中的数据能够跨越页面刷新而存在

（2）如何使用sessionStorage存储数据

　　因为sessionStorage对象是Storage的一个实例，因此存储数据时可使用setItem()或者直接设置新的属性来存储数据

//  使用方法存储数据
sessionStorage.setItem("ifClick", "true");

//  使用属性存储数据
sessionStorage.ifClick = "true";

　　当咱们要获取某个数据的时候，可使用getItem来获取数据

sessionStorage.getItem("ifClick");

　　咱们如今又成功获取到ifClick的值啦，固然也能够经过length属性和key()方法来获取sessionStorage的值

（3）sessionStorage的特色

　　a、同源策略限制，若想在不一样页面之间对同一个sessionStorage进行操做，这些页面必须在同一协议、同一主机名和同一端口下

　　b、单标签页限制，sessionStorage操做限制在单个标签页中，在此标签页进行同源页面访问均可以共享sessionStorage数据

　　c、只在本地存储，seesionStorage的数据不会跟随HTTP请求一块儿发送到服务器，只会在本地生效，并在关闭标签页后清除数据

　　d、存储方式，seesionStorage的存储方式采用key、value的方式

　　e、存储上限限制：不一样的浏览器存储的上限也不同，但大多数浏览器把上限限制在5MB如下

 

三、globalStorage

（1）什么是globalStorage

　　做为最初的Web Storage的一部分，这个对象的目的是跨越会话存储数据，但有特定的访问限制，如今globalStorage已经被localStorage取代

（2）如何使用globalStorage存储数据

　　要使用globalStorage，首先要指定哪些域能够访问该数据，能够经过方括号标记使用属性来实现

globalStorage["aaa.com"].ifClick = "true";

　　在上面的代码中，访问的是针对域名aaa.com的存储空间，这个存储空间对于aaa.com及其全部子域都是能够访问的，咱们能够像下面这样来获取数据

globalStorage[aaa.com].getItem("ifClick");

　　由于globalStorage如今已经比较少使用，若是你们想使用，仍是使用localStorage

（3）globalStorage的特色

　　若是不使用removeItem()或者delete删除，或者用户未清除浏览器缓存，数据将会一直保存在磁盘上，所以很适合在客户端存储文档或者长期保存用户偏好设置

 

四、localStorage

（1）什么是localStorage

　　localStorage对象在修订过的html5规范中做为持久保存客户端数据的方案却带了globalStorage，与globalStorage不一样，不能给localStorage指定任何访问规则，由于规则已经事先订好了，要访问同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口

（2）如何使用localStorage存储数据

　　因为localStorage是Storage的实例，能够像使用sessionStorage同样来使用它

localStorage.setItem("ifClick","true");

　　当咱们要获取数据的时候，能够像下面这样获取

localStorage.getItem("ifClick");

　　存储在localStorage中的数据和存储在globalStorage中的数据同样，都遵循相同的规则，数据保留到经过js删除或者是用户清除浏览器缓存

（3）localStorage的特色

　　a、localStorage会能够将第一次请求的数据直接存储到本地，这个至关于一个5M大小的针对于前端页面的数据库，相比于cookie能够节约带宽，可是这个倒是只有在高版本的浏览器中才支持的

　　b、目前全部的浏览器中都会把localStorage的值类型限定为string类型，这个在对咱们平常比较常见的JSON对象类型须要一些转换

　　c、localStorage本质上是对字符串的读取，若是存储内容多的话会消耗内存空间，会致使页面变卡

　　最后，要和你们说的是，sessionStorage和localStorage都克服了cookie的一些限制，它们都有不少共同的特色，localStorage与sessionStorage的惟一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

 

5、IndexedDB

一、为何会有IndexedDB

　　现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不一样），并且不提供搜索功能，不能创建自定义的索引，因此，须要一种新的解决方案，这就是 IndexedDB 诞生的背景

 

二、什么是IndexedDB

　　通俗地说，IndexedDB 就是浏览器提供的本地数据库，它能够被网页脚本建立和操做，IndexedDB 容许储存大量数据，提供查找接口，还能创建索引，这些都是 LocalStorage 所不具有的，就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库

 

三、IndexedDB的特色

　　a、键值对储存： IndexedDB 内部采用对象仓库（object store）存放数据，全部类型的数据均可以直接存入，包括 JavaScript 对象，对象仓库中，数据以"键值对"的形式保存，每个数据记录都有对应的主键，主键是独一无二的，不能有重复，不然会抛出一个错误

　　b、异步： IndexedDB 操做时不会锁死浏览器，用户依然能够进行其余操做，这与 LocalStorage 造成对比，后者的操做是同步的，异步设计是为了防止大量数据的读写，拖慢网页的表现

　　c、支持事务： IndexedDB 支持事务（transaction），这意味着一系列操做步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生以前的状态，不存在只改写一部分数据的状况

　　d、同源限制：IndexedDB 受到同源限制，每个数据库对应建立它的域名，网页只能访问自身域名下的数据库，而不能访问跨域的数据库

　　e、储存空间大： IndexedDB 的储存空间比 LocalStorage 大得多，通常来讲很多于 250MB，甚至没有上限

　　f、支持二进制储存：IndexedDB 不只能够储存字符串，还能够储存二进制数据（ArrayBuffer 对象和 Blob 对象）

　　对于IndexedDB的操做会比较复杂，若是你们有兴趣能够在网上再本身看一些资料

 

　　好啦，今天就介绍到这里啦，这是目前比较经常使用的几种存储方式，但愿你们一块儿学习呀

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程