当前位置：首页 > news >正文

html5的本地存储

news 来源：原创 2024/5/17 21:05:55

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("插入数据成功");
                },
                function(fx, error) {
                    console.log("插入数据失败");
                }
            );

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

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

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

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

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