html5的本地存储

发布时间:2020-02-23 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html5的本地存储脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html5提供了四种在客户端存储数据的新方法:
localStorage,sessionStorage,globalStorage,WebSql Database
前面三个适用于存储少量数据,而Web Sql Database适用于存储大型的,复杂的数据。

与cookie的区别:
web存储安全性软高,在数据量上可以达到5M,而cookie最多也就4KB,或20个key/value对。

localStorage与sessionStorage有相同Api

localStorage.length 获取storage中的个数
localStorage.key(n) 获取storage中第n个键值对的键
localStorage.key = value
localStorage.setItem(key,value) 添加
localStorage.getItem(key) 获取
localStorage.removeItem(key) 移除
localStorage.clear() 清除

 例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body></body>
<script>
    //cookie关闭浏览器就会消失
    document.cookie = "name=test";
    console.log(document.cookie);

    //关闭浏览器不会消失
    localStorage.setItem("name","test2");
    console.log(localStorage.getItem("name"));

    //关闭浏览器会消失
    sessionStorage.setItem("name","test3");
    console.log(sessionStorage.getItem("name"));

    for(var ix = 1; ix < 10; ++ix) {
        localStorage.setItem(ix,ix);
    }
    console.log(localStorage.length);
    console.log(localStorage.key(2));

</script>
</html>

 WebSql Database

三个核心方法
openDatabase 这个方法使用现有数据库或创建新数据库
transaction 这个方法允许我们根据情况控制事务提交或回滚
executeSql 这个方法用于执行sql查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body></body>
<script>
    if(window.openDatabase) {
        //openDatabase参数:数据库名,版本号,数据库描述,数据大小,回调函数
        var db = openDatabase("test","1.0","测试库",1024*1024);

        db.transaction(function(fx) {
            fx.executeSql(
                "create table users(id int,name text)",//替换语句中问号的内容
                [],//成功时的回调函数
                function(fx,result) {
                    console.log("创建表成功");
                },//失败时的回调函数
                function(fx,error) {
                    console.log("创建表失败");
                }
            );

            //插入数据
            fx.executeSql(
                "insert into users(id,name) values(?,?)",[1,"test"],function(fx,result) {
                    console.log("插入数据成功");
                },error) {
                    console.log("插入数据失败");
                }
            );

            //修改数据
            fx.executeSql(
                "update users set name=? where id=?",["wohehe",1],result) {
                    console.log("更新数据成功");
                },error) {
                    console.log("更新数据失败");
                }
            );

            //查询数据
            fx.executeSql(
                "select * from users",[],result) {
                    console.log("查询数据成功");

                    //遍历查询数据
                    var data = result.rows;
                    for(var ix = 0; ix < data.length; ++ix) {
                        console.log(data[ix]["id"] + ":" + data[ix]["name"]);
                    }
                },error) {
                    console.log("查询数据失败");
                }
            );

            //删除数据
            fx.executeSql(
                "delete from users where id=?",[1],result) {
                    console.log("删除数据成功");
                },error) {
                    console.log("删除数据失败");
                }
            );

            //删除表
            fx.executeSql(
                "drop table users",result) {
                    console.log("删除表成功");
                },error) {
                    console.log("删除表失败");
                }
            );
        });
    }
</script>
</html>

 

总结

以上是脚本之家为你收集整理的html5的本地存储全部内容,希望文章能够帮你解决html5的本地存储所遇到的程序开发问题。

其他人正在看

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
标签: