本地存储

时间 2019-12-08

标签本地存储繁體版

原文原文链接

前端本地存储方式有cookie和HTNL5的web Storage。javascript

1.cookie

在h5以前，存储主要用的是cookie。cookie会随着每次http请求头信息一块儿发送，无形中增长了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不一样而不一样，IE6大约只能存储2K，其他的为4K。cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。前端

Cookie的结构：java

Name = str(存储在cookie中的字符串，键和值都必须通过URL编码); expires = GMT time(失效时间); domain=.wrox.com(域名); path =/(对于指定域中的那个路径发送cookie); secure(安全标志，只有在SSL链接才能发送cookie)web

cookie的存取方法浏览器

存/取:赋值（键值对）安全

document.cookie = "键=值"; 服务器

删：（设置存储有效时长为过去时间）cookie

cookie的优缺点网络

优势：（1）可控制过时时间，使其不会长期有效（2）可扩展、可用性比较好（3）可加密减小cookie被破解的可能性session

缺点：（1）数量和长度有限制，最多20条，最长不能超过40k（2）在请求头上带着数据安全性差

cookie的应用场景

主要应用：购物车、客户端登陆

封装cookie读、写和删除代码

读：获取URL编码后cookie值开始和结束的位置；

写：将键值编码后拼接后面的选项；

删除：设置相同的键名，路径，域名，安全属性。并把值设为“”空字符串，expries设为过去时间。

<script type="text/javascript">
         var cookieUtil = {};
         cookieUtil.set = function(name, value, expires, path, domain, secure) {
                   var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
                   if(expires instanceof Date){
                            cookieText += ";expires" + expires.toGMTString();
                   }
                   if(path){
                            cookieText += ";path=" + path;
                   }
                   if(domain){
                            cookieText += ";domain" + domain;
                   }
                   if(secure){
                            cookieText += ";secure";
                   }
                   document.cookie = cookieText;
         };
         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;
         };
         cookieUtil.delet = function(name, path, dimain, secure){
                   this.set(name, "", new Date(0), path, domain, secure);
         }
</script>

2.localStorage

localStorage（本地存储）,将数据保存在客户端本地的硬件设备，即浏览器被关闭后，该数据仍然存在。（一般只能够长期存储数据，没有时间限制。 localStorage中通常浏览器支持的是5M大小，这个在不一样的浏览器中localStorage会有所不一样）

使用方法

localStorage.setItem("key","value");//存储

localStorage.getItem(key);//按key进行取值

localStorage.removeItems(key);//按key单个删除

localStorage.clear();//删除所有数据

localStorage.length;//得到数据的数量

localStorage.valueOf();//获取所有值

优缺点

优势：

localStorage拓展了cookie的4k限制；

localStorage能够将第一次请求的5M大小数据直接存储到本地，相比于cookie能够节约带宽；

localStorage的使用也是遵循同源策略的，因此不一样的网站直接是不能共用相同的localStorage；

缺点：

须要手动删除，不然长期存在；

浏览器大小不一，版本的支持也不同；

localStorage只支持string类型的存储，JSON对象须要转换；

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

特色：

同源策略限制、只在本地存储、永久保存、同浏览器共享。

应用场合

1) 数据比较大的临时保存方案。如在线编辑文章时的自动保存。

2) 多页面访问共同数据。sessionStorage只适用于同一个标签页，localStorage相比而言能够在多个标签页中共享数据。

3.sessionStorage

sessionStorage（会话存储），用户在浏览某个网站时，从进入网站到浏览器关闭所经历的这段时间内，浏览器能够保存这段时间内所要求保存的任何数据。（建立另外一个页面时同时可使用，关闭浏览器以后数据就会消失。）

使用方法，同localStorage

特色

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

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

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

存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。)。

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

应用场合

sessionStorage 很是适合单页应用程序，能够方便在各业务模块进行传值。

4.localStorange与sessionStorage的区别

相同点：

存值都是以键值对形式存在，值也是存入字符串类型（若是是对象，就序列化之后再存入）；

localStorage和sessionStorage使用时使用相同的API；

都是用来存储客户端临时信息的对象；

不一样点：

H5的两种存储技术的最大区别就是生命周期。

localStorage是本地存储，存储期限不限；

sessionStorage是会话存储，页面关闭数据就会丢失。

5.cookies，sessionStorage 和 localStorage 的区别

概念：

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。

sessionStorage和localStorage是web存储机制，将数据存储在本地客户端上，无须持续的将数据发送给浏览器，存储大量能够跨浏览器的数据机制。

载体：

cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回传递，浪费带宽。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

方法：

Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。

做用：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

存储大小：

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭