HTML5本地储存

来源：互联网发布：deandre ayton体测数据编辑：程序博客网时间：2024/05/22 05:33

在HTML5之前，本地储存通常用到就是cookies，就是存储空间太小，大约只有4kb。当然也有部分浏览器可以通过插件获得更大的存存空间，没有用过，不作讨论。随着网络发展，cookies已经满足不了现在的需求了。HTML5的本地储存应运而生。

一、　HTML5本地储存storage

1.localStorage 持久化本地储存，用户不主动删除会一直存在

2.sessionStorage 浏览器关闭，数据删除

方法：

setItem(key,value) 向本地存储一条数据

getItem(key) 通过键名获取本地相应数据

key(index) 通过索引获取本相应地数据

removeItem(key) 通过键名删除本地相应数据

clear() 删除本地所有数据

属性：

length 返回本地储存数据的条数

兼容性：

兼容性图片

目前主流浏览器大多都支持，亲测ie8不支持。

示例代码：

localStorage.setItem('a',"1");localStorage.setItem('b',"2");localStorage.setItem('c',"3");console.log(localStorage.getItem("a"))   //1console.log(localStorage.length);        //3console.log(localStorage.key(1));        //b

二、HTML5 webSql数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs

方法：

openDatabase（dataName,version,description,size,callBack）打开已存在的数据库，如果不存在则会创建一个数据库

dataName 数据库名称

version 版本

description描述

size 大小

callBack 回调函数(可选)

transaction(querySql,errorCallback,successCallback)控制一个事务，以及基于这种情况执行提交或者回滚

querySql 包含事务内容的一个回调方法，其中可以执行sql语句（必选）

errorCallback事务执行失败回调(可选)

successCallback事务执行成功回调（可选）

executeSql(sqlStatement,arguments,errorCallback,successCallback) 执行sql语句，返回执行结果

sqlStatemen 可执行的sql语句(必选)

arguments 替代slq语句中的问号(可选)

errorCallback 事务执行失败回调(可选)

successCallback 事务执行成功回调（可选）

兼容性：

示例代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>localstorage</title><script type="text/javascript">window.onload=function(){var db=openDatabase("test","1.0","test DB",2*1024*1024);    //创建数据库db.transaction(function(q){q.executeSql("CREATE TABLE IF NOT EXISTS testTab(id,name,age)");    //创建表q.executeSql("INSERT INTO testTab(id,name,age) VALUES(?,?,?)",["1","赵子龙","29"]);  //插入数据q.executeSql("UPDATE testTab SET age='30' WHERE id =?",["1"]);   //修改数据q.executeSql("SELECT * FROM testTab",[],function(c,res){// 读取数据for(var i in res.rows){console.log(res.rows.item(i));}});q.executeSql("DELETE FROM testTab WHERE id=?",["1"]);           //删除数据q.executeSql("DROP TABLE testTab",[],function(){},function(a,b){console.log(b)});  //删除表});}</script></head><body></body></html>

0 0