位置: IT常识 - 正文
浏览器本地存储的四种方式(浏览器本地存储的方式)
编辑：rootadmin推荐整理分享浏览器本地存储的四种方式(浏览器本地存储的方式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:浏览器本地存储覆盖漏洞,浏览器本地存储技术,浏览器本地存储权限怎么开,浏览器本地存储和会话存储,浏览器本地存储和会话存储,浏览器本地存储权限怎么开,浏览器本地存储和会话存储,浏览器本地存储和会话存储,内容如对您有帮助，希望把文章链接给更多的朋友！
浏览器的本地存储主要分为Cookie、WebStorage和IndexedDB，其中WebStorage又分为localStorage（本地存储）和sessionStorage（会话存储），下面我们一一介绍：
1.CookieCookie最开始并不是用于本地存储的，而是为了弥补HTTP在状态管理上的不足：
HTTP是一个无状态的协议，客户端向服务器发送请求，服务器返回响应，但是下一次发送请求时服务端就无法识别客户端的身份信息，故而产生了Cookie。
Cookie本质上是浏览器里面存储的一个很小的文本文件，内部以键值对的方式存储。向同一个域名下发送请求都会携带相同的Cookie，服务器拿到Cookie进行解析，就能拿到客户端的状态。
也就是说，Cookie的作用就是用来做状态存储的。
cookie的具体实现过程：
当用户访问web服务器后，web服务器会获取用户的状态并且返回一些数据（cookie）给浏览器，浏览器会自动储存这些数据（cookie)。当用户再次访问web服务器，浏览器会把cookie放到请求报文中发送给web服务器，web服务器就会获取到了用户的状态。基于这次用户的状态方便用户进行其他业务的访问，并且web服务器可以设置浏览器保存cookie的时间，cookie是有域名的概念，只有访问同一个域名的时候才会把之前相同域名返回的cookie携带给该web服务器。缺陷：
容量缺陷：Cookie的体积上限只有4KB，只能用来存储少量的信息。性能缺陷：Cookie是紧跟域名的，不管域名下面的某个地址需不需要这个Cookie，它都会携带上完整的Cookie。这样随着请求数据的增多，很容易造成性能上的浪费。安全缺陷：由于Cookie以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，并在Cookie的有效期内重新发送给服务器。另外，在HTTPOnly为false的情况下，Cookie信息能直接通过JS脚本读取。 Cookie属性代码示例：
document.cookie = "username=ziming; expires=Thu, 16 Dec 2015 12:00:00 GMT; path=/" // 设置cookiedocument.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT" // 删除cookie 2.session（扩展）cookie和session都是用来跟踪浏览器用户的身份的方式
区别：1.保存方式cookie保存在浏览器端；
session保存在服务器端
2.使用原理cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含session id。如果有session id，服务器将根据该id返回对应session对象。如果客户端请求中没有session id，服务器会创建新的session对象，并把session id在本次响应中返回给客户端。3.存储内容：cookie只能保存字符串类型，以文本的方式。session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)4.存储的大小：cookie：单个cookie保存的数据不能超过4kb。session大小理论上没有限制。5.安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。6.应用场景：cookie：
判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须重新填写登录的相关信息。保存上次登录的时间等信息。保存上次查看的页面浏览计数session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
网上商城中的购物车保存用户登录信息将某些数据放入session中，供同一用户的不同页面使用防止用户非法登录7.缺点：cookie：
大小受限，不能超过4kb；用户可以操作（禁用）cookie，使功能受限；安全性较低；有些状态不能保存在客户端；每次访问都要传送cookie给服务器，浪费带宽；cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。session：
Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。依赖于cookie（session id保存在cookie），如果禁用cookie，则要使用URL重写，不安全创建session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。3.Web storage API （localStorage、sessionStorage）
Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。
Web Storage提供两种类型的API：localStorage和sessionStorage
两者的区别看名字就有大概了解，localStorage在本地永久性存储数据，除非显式将其删除或清空；sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。
1.localStoragelocalStorage的存储都是字符串，如果是存储对象，那么在存储时就需要调用JSON的stringify方法，并且在取值时用JSON.parse来解析成对象。
与Cookie的异同：同：针对一个域名，即在同一域名下，会存储同一段localStorage。
异：
容量：localStorage的容量上线为5MB。只存储在客户端，默认不参与与服务器端的通讯，这样就很好的避免了Cookie带来的性能和安全问题。接口封装：通过localStorage暴露在全局，并通过它的setItem和getItem等方法进行操作。应用场景：因为localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源；例如官网的logo，存储Base64格式的图片资源。
2、sessionStorage将数据保存在session对象中。
所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
与localStorage的异同：同：
容量：sessionStorage的容量上线也为5MB。只存储在客户端，默认不参与与服务器端的通讯。接口封装：除了名字变化，sessionStorage的存储方式和操作方式均和localStorage一样。localStorage和sessionStorage只能存储字符串类型。异：
sessionStorage将数据保存在Session对象中。而localStorage将数据保存在客户端本地的硬件设备，即使浏览器被关闭了该数据依然存在，下次打开浏览器访问网站时可以继续使用。
localStorage:localStorage的生命周期是永久的，sessionStorage的生命周期是在仅在当前会话下有效。
应用场景：可以使用sessionStorage对表单进行维护，将表单信息存储在里面，即使刷新表单也能保证不会让之前的表单信息丢失。可以使用sessionStorage来存储本次浏览记录，即那种关闭页面就不需要的浏览记录。属性：Storage.length (window.localStorage.length)
方法：
Storage.setItem(name,key) ：设置值 Storage.getItem(name)：获取 Storage.removeItem(name)：删除 Storage.clear()：删除所有值 Storage.key()：获取键值
4.indexedDB当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用indexedDB数据库来进行数据的存储，indexedDB数据库存储理论上没有大小的限制。
IndexedDB 鼓励使用的基本模式如下所示：
打开数据库。在数据库中创建一个对象仓库（object store）。启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。通过监听正确类型的 DOM 事件以等待操作完成。在操作结果上进行一些操作（可以在 request 对象中找到） DEMO缺点：indexedDB属于非关系型数据库，操作繁琐，对新手不友好
上一篇：vue+node+mysql全栈项目完整记录(nodejs vue)
下一篇：Echarts y轴相关配置(echarts y轴设置)
