浏览器中的“本地存储”

javascript html5 文章 2020-01-30 12:13 0 461 全屏看文

本地存储 - 公子小苏 - 博客园

    前端本地存储方式有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过期时间之前一直有效,即使窗口或浏览器关闭


原文出处:https://www.cnblogs.com/microcosm/p/7147600.html

-EOF-