本地存储

Posted 2020-09-27 花信

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

1.cookie

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

Cookie的结构：

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

cookie的存取方法

存/取:赋值（键值对）

document.cookie = "键=值";  

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

cookie的优缺点

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

缺点：（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过期时间之前一直有效，即使窗口或浏览器关闭