webstorage vs cookie

sessionStorage以及localStorage都是html5定义的api方法。旨在实现本地存储

先说说sessionStorage以及localStorage之间区别：

localStorage是在浏览器同源下存储的，也就是a.com/xx.html以及a.com/xxx.html都共享着各自存储的内容。除非手工删除其存储内容否则永远不会过期。

当你关闭a.com后下次打开只要没有删除存储内容 浏览器还是会存在存储内容。

sessionStorage也是在浏览器同源下存储的。a.com/xx.html以及a.com/xxx.html同样共享着各自存储的内容，

只不过html5引入了一个浏览器窗口概念，当设置sessionStorage的窗口未关闭情况下，同源内的其它页面在这个窗口下也是会共享这个存储数据，这里注意是同一个窗口

但是如果这个页面窗口（或者tab）被关闭其它同源下页面就不存在这个存储内容，生命周期也就结束。下次重新打开也不会存在。

共同点：

二者同为Storage对象，提供的方法常用的有getItem、setItem、clear;

getItem可以获得存储对象值 localStorage.getItem('xx');也可以用localStorage.xx来替代；

setItem可以设置存储对象localStorage.setItem("xx",'xxx');也可以用localStorage.xx='xxx'来替代;

removeItem可以删除一条具体数据：localStorage.removeItem('xxx');

clear批量删除所有存储；

对于object对象可以用JSON.stringfy进行转化然后存储，用的时候利用JSON.parse转化回来使用。

对于图片存储我们可以将图片转化为DataURI格式进行存储；具体转化方式可以借用canvas提供的toDataURL

对于webstorage本地存储各浏览器支持也是不同，总体来说平均对每个源分配的存储大小大约5M,这对于一般的数据存储足够了，

如果为了提高性能来缓存图片，一定要注意图片大小，及时清理无用的存储，另外配合缓存来实现最佳性能

cookie:

cookie是所有浏览器都支持的本地存储策略，也是基于同源策略进行访问，存储大小只有4k，比较适合于小的数据标示用。

在同源请求中会默认进行传送，也就是说每发一个请求，cookie都会在传输过程中作为请求内容进行传送。

document.cookie默认得到所有cookie；

document.cookie='name=value;expires='+date.toGMTString();增加一条cookie;其中expires标识为cookie过期时间，即过了这个时间该cookie就不存在了;

delcookie是不存在的，我们可以利用设置expires为一个过期的时间则执行之后该cookie立即消失；

webStorage与cookie区别：

在以上介绍了两种特点之后，区别也就显而易见了：

效率：cookie会在http请求中传送，浪费带宽，而webStorage只有在手动添加时候才能进行请求

存储大小：cookie只有4k，而webStorage有平均5M的本地存储；

过期时机：cookie根据expires设置过期时间。webStorage在浏览器窗口关闭或者始终有效（靠手动进行删除）

共享方式：cookie在同源下只要没过期就会一直共享，localStorage在同源中没被删除情况也会共享。sessionStorage在窗口关闭之前在同一个窗口同源下才能共享

总结：

webStorage相比于cookie有着更明显的优势。在存储效率上可以减少请求带宽、存储大小更容易满足我们一般数据处理、过期时机容易在人工操作下主观的去管理、共享方式更是根据业务选择面比较大；

缺点就是低版本浏览器不支持，所以如果我们不确定用户浏览器是否支持情况下可以进行兼容的封装本地存储。网上一大堆。。不再赘述！