前端学习之路html5(04)-特性

最新推荐文章于 2023-03-03 00:56:05 发布

戚继光

最新推荐文章于 2023-03-03 00:56:05 发布

阅读量408

点赞数

分类专栏： web前端文章标签： html5 前端存储

本文链接：https://blog.csdn.net/weixin_36244867/article/details/61933567

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html5 web 存储

html5的web存储不同于cookie存储，它的存储效率更好。它的数据只能允许该网页访问，客户端存储数据的两个类型

localStorage：没有时间限制的存储；
sessionStorage：针对一个session的存储。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>datalist</title> 
</head>

<body>
<div id="result"></div>
<script type="text/javascript">
    if (typeof(Storage)!=="undefined") {
        localStorage.myName="戚继光"
        document.getElementById("result").innerHTML=localStorage.myName + "抗倭名将";
    } else {
        document.getElementById("result").innerHTML="浏览器不支持storage";
    }
</script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>datalist</title> 
<script type="text/javascript">
function clickCount() {
    if (typeof(Storage)!=="undefined") {
        if (sessionStorage.count) {
            sessionStorage.count=Number(sessionStorage.count)+1;    
        }else{
            sessionStorage.count=1;             
        }
        document.getElementById("result").innerHTML="你已经点了" + sessionStorage.count + "次";
    }else{
        document.getElementById("result").innerHTML="浏览器不支持Storage";
    }
}
</script>
</head>

<body>
<button onclick="clickCount()" type="button">up up</button>
<div id="result"></div>
</body>

</html>

localStorage对象

此对象的存储数据没有任何的时间限制；
此类数据存储以key-value形式。上例中key=”myName”，value=”戚继光”；
它对应的几个操作如下
存储，localStorage.myName=”戚继光”；
查找，直接引用：var name = localStorage.myName；
移除，localStorage.removeItem(key);

sessionStorage对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

localStorage、sessionStorage共同的常用api

以localStorage为例，sessionStorage的用法含义相同。
保存数据，localStorage.setItem(key, value);
读取数据，localStorage.getItem(key);
删除单个数据，localStorage.removeItem(key);
删除所有数据，localStorage.clear();
获取某个索引的key，localStorage.key(index);

localStorage、sessionStorage的demo

html5 web sql

web sql数据库api并不是html5规范的一部分，但是它是一个独立的规范，引入了一组使用sql操作客户端数据库的apis。

核心方法

openDatabase：使用现有的数据库或者新建的数据库创建一个数据库对象；
transaction：让我们能够控制一个事务，以及基于这种情况执行提交或回滚；
executeSql：用于执行实际的sql语句。

打开数据库

使用openDatabase()来打开一个数据库，如果存在直接打开，如果不存在创建一个新的数据库；
var db=openDatabase(‘mydb’, ‘1.0’, ‘test db’, 2*1024*1024);
参数1，数据库名称；
参数2，版本号；
参数3，数据库描述文本；
参数4，数据库大小；
参数5，创建回调。
参数5，创建回调会在创建数据库后被调用。

执行查询操作

//下面的语句会在'mydb'数据库中创建一个名为PERSON的表。
var db = openDatabase('mydb', '1.0', 'test DB', 2*1024*1024);
db.transaction(function (tx){
    tx.executeSql('CREATE TABLE IF NOT EXISTS PERSON(id unique, name)');
});

插入数据

db.transaction(function (tx){
    tx.executeSql('CREATE TABLE IF NOT EXISTS PERSON(id unique, name)');
    tx.executeSql('INSERT INTO PERSON(id, name) VALUES(1, "戚继光")');
    tx.executeSql('INSERT INTO PERSON(id, name) VALUES(2, "赵子龙")');
});

删除记录

db.transaction(function (tx){
    tx.executeSql('DELETE FROM　PERSON WHERE id=1');
});
//删除指定的数据id也可以是动态的
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);

更新记录

db.transaction(function (tx) {
    tx.executeSql('UPDATE PERSON SET name=\'戚继光夫人\' WHERE id=1');
});
//更新指定的数据id也可以是动态的
tx.executeSql('UPDATE PERSON SET name=\'戚继光夫人\' WHERE id=?', [id]);

读取数据

db.transaction(function (tx){
    tx.executeSql('SELECT * FROM PERSON', [], function(tx, results){
        var len = results.rows.length, i;
        msg = "<p>查询记录的条数:" + len + "</p>";
        document.querySelector('#status').innerHTML += msg;
        for(int i=0; i<len; i++){
            alert(results.rows.item(i).name);
        }
    }, null);
});

一个完整的例子

html5 web workers

类似于后台脚本?
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

demo