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