WebStorage是HTML5中引入的类似cookie的本地存储功能,可用于客户端本地存储sessionStorage&&localStoragesessionStorage——用于临时保存同一窗口(或标签页)的数据,这些数据将在关闭窗口或选项卡后被删除,会话级存储。localStorage-用于持久化的本地存储,除非主动删除数据,否则数据将一直存在不同于cookie的4kb数据存储localStorage和sessionStorage都可以保存5MB的信息localStorage和sessionStorage:只在客户端(即浏览器)LocalStorage和sessionStorage:原生接口可以使用localStoragesessionStorage:可以在前端页面查看,安全性能差valueOf-获取所有数据判断是否支持if(window.localStorageorwindow.sessionStorage){//浏览器支持localStorage或者sessionStorage}else{//不支持}应用场景localStorage可以用来夸页面传递参数sessionStorage保存一些临时数据,防止用户刷新页面后丢失一些参数ScopelocalStorage:在同一个浏览器中,可以进行数据操作文档可以共享数据以实现数据操作兼容性IndexedDBIndexedDB-是用于客户端存储大量结构化数据(包括文件/blob)的低级API。API使用索引来实现此数据的高性能搜索。在HTML5的本地存储中,数据库是一个存储在客户端本地的NoSQL数据库,可以存储大量的数据。特性支持事务、游标、索引等数据库操作,存储空间大,永久存储,删除缓存不打扰IndexedDB,异步一页可以连接多个IndexedDB数据库,每个数据库的名称必须唯一varindexedRequest=indexedDB.open('dbName',1);打开连接到数据库并接收两个参数。第一个参数是数据库名,第二个版本号(必须是整数)onerror&&onsuccess数据库成功或失败后的回调onsuccess(e)db=e.target.resultdb.close关闭数据库add添加数据.接收一个参数,该参数是对象存储中要保存的对象。put添加或修改数据。接收参数获取对象get需要保存在对象存储中的数据。为需要获取数据的主键值delete接收一个删除数据的参数。接收一个参数,为需要获取数据的主键值onupgradeneed数据库更新回调deleteDatabase删除数据库。接收一个参数,数据库名兼容IE10+Firefox10+,Chrome23+,Opera15+iPhoneios8-ios10safari支持(X5内核不支持)AndroidX5内核支持WebSQLWebSQL-WebSQL数据库API不属于HTML5规范,但是它是一个独立的规范,引入了一组使用SQL操作客户端数据库的API核心方法openDatabase:这个方法使用一个现有的数据库或者一个新的数据库来创建一个数据库对象事务:这个方法允许我们控制一个事务,并根据这种情况执行commit或rollbackexecuteSql:该方法用于执行实际的SQL查询openDatabase打开数据库我们可以使用openDatabase()方法打开已有的数据库,如果数据库不存在,新建一个数据库将被创建,使用代码如下:vardb=openDatabase('mydb','1.0','TestDB',210241024);openDatabase(数据库名称,版本号,描述文本,数据库大小,创建回调)transaction数据库操作&&executeSql操作数据库打开数据库vardb=openDatabase('mydb','1.0','TestDB',210241024);db.transaction(function(tx){tx.executeSql(operationstatement);});兼容性鉴于HTML5已经放弃webSql,不建议继续深入学习。总结当之前提到本地存储,我们往往只想到cookie。我们不知道HTML中有几种不同的本地存储。包括sessionStorage、localStorage和IndexedDB,但是随着我们的需求不断增长,cookie已经不能很好的满足我们的需求了。这时候就出现了sessionStorage、localStorage和IndexedDB,这三者都具有cookie所没有的功能属性。帮助我们更好的完成web开发。
