本地存储localstorage 存储方式：以键值对（Key-Value）的方式存储，永久存储，永不失效，除非手动删除。
本篇文章主要介绍了前端HTML5几种存储方式的总结 ，主要包括本地存储localstorage，本地存储sessionstorage，离线缓存（application cache），Web SQL，IndexedDB。有兴趣的可以了解一下。总体情况h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。
HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储 （关闭浏览器依然存在）sessionStorage - 针对一个 session 的数据存储 （关闭浏览器后即清空）之前，这些都是由 cookie 完成的。
原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
Application Cache带来的三个优势是：① 离线浏览② 提升页面载入速度③ 降低服务器压力而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响离线存储技术HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景；传统还有离线存储技术为Cookie。
本文主要介绍了前端HTML5的几种存储方式的总结，包括localstorage、localstoragesessionstorage、offlinecache、WebSQL和IndexedDB。有兴趣的可以了解一下。 开始正文~ 在h5之前，cookies主要用于存储。Cookies的缺点是在请求头中携带数据，大小在4k以内。主要领域污染。
按F12打开控制台，找到sessionStorage，会发现其是用键值对的方式存储数据的。localStorage跟sessionStorage类似，只是localStorage只要不删除就会永久存储在电脑上，而sessionStorage只要关闭了页面就没有了，这里小编就不再演示了。
可以的。你把数据结构化，组装成json格式就可以存储了。
只要是能序列化成字符串的内容都可以存储） 本地存储sessionstorage HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。
总结：html5 的 localStorage 用于存储一些临时的离线数据 localStorage 和 file、database 一样，是存储，有永久性质。你存入数据库的数据，不会在某一天突然被删除了。你保存到硬盘里面的文件，也不会再某一天突然消失了。所以，localStorage 本身没有时效性，因为 storage 毕竟不是 cache。
前面说过，webstorage是对cookie的优化而来，HTML4中使用cookie在客户端存储用户数据，长期使用发现存在以下问题：大小限制在4kbcookie每次随HTTP事务一起发送，浪费带宽正确操作cookie很复杂（这个有待考虑）由于以上问题，HTML5提出WebStorage作为新的客户端本地保存技术。
session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。/pplocalStorage：将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。/pp两者区别就是一个作为临时保存，一个拥有长期保存。
html5本地存储实例详解之删除 html5本地存储的删除其实也很简单，也是打开控制台找到相应的存储信息，在上面右击删除即可。点击删除之后需要刷新一次页面就会看到本地存储的数据已经删除了。如果用代码的话，就是.removeItem（key）这个了。
}）；由这些操作可以看出，基本上都是用SQL语句进行数据库的相关操作，如果你会MySQL的话，这个应该比较容易用。IndexedDB索引数据库 （IndexedDB） API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。
HTML5本地存储——Web SQL Database 在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。
打开数据库： 执行查询操作： 插入数据： 读取数据： 从这些操作可以看出，SQL语句基本上都是用于数据库相关的操作。如果你懂MySQL，这个应该比较好用。 IndexedDB）API（作为HTML5的一部分）对于创建具有丰富本地存储数据的数据密集型离线HTML5Web应用程序非常有用。
原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
HTML5的离线储存技术是通过在客户端 （浏览器）中缓存Web应用程序的数据和文件来实现的。一旦缓存，Web应用程序将像普通应用程序一样在离线状态下继续运行。
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
前端存储\x0d\x0a所谓前端存储，是在网络视频监控系统的前端设备（如网络视频编码器或网络摄像机）中内置存储部件，由前端设备直接完成监控图像的本地录制和保存。
HTML5本地存储——Web SQL Database 在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。
indexedDB 索引数据库（indexDB）API（作为HTML5 的一部分）对创建具有吩咐本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统再现Web应用程序（比如移动 Web 应用程序）能够更快的运行和响应。
Flash本地存储，类似于HTTP cookie，它是利用 SharedObject类来实现本地存储信息。它默认允许每个站点存储不超过100K的数据，远大于cookie，而且能够跨浏览器。缺点：浏览器需安装 Flash 控件，毕竟它是通过Flash的类来存储。所幸的是，没有安装Flash的用户极少。