第7章本地存储

最新推荐文章于 2021-07-18 13:00:47 发布

#无关风月#

最新推荐文章于 2021-07-18 13:00:47 发布

阅读量194

点赞数

分类专栏：前端学习文章标签： javascript html5

本文链接：https://blog.csdn.net/XSZL_liaojc/article/details/118735607

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

传统的客户端存储技术大多使用Cookie存储数据。但是Cookie不安全，用户禁用了Cookie就会导致客户端不能直接读取文件，从而使客户端几乎没有任何有效的存储技术。

HTML5为客户端存储数据提供2种方法。存储复杂数据使用Web Database，存储简单的键/值对使用Web存储。

一、Web存储

Web存储允许开发人员以键值对形式将数据存储到客户端浏览器。

1、Cookie的优缺点

Cookie用文本来存储信息，用于保存用户信息，如用户设置、密码等。

优点：简单易用，浏览器负责发送数据和自动管理不同站点的Cookie。

缺点：安全性差，存储容量仅4KB，且存储的键值对数量有限。用户可禁用Cookie，Cookie由请求来传递，传递大量数据时，效率低。

2、Web存储的意义

相对于Cookie存储，Web存储提供了简单易用的API接口，仅需设置键值即可。可以根据用户分配的磁盘配额进行存储，可以存储会话、设置偏好、本地化的数据和离线数据等。同时Web存储提供了使用JavaScript编程接口，可以使用JavaScript客户端脚本实现服务器端的部分工作。

HTML5提供了localStorage和sessionStorage两种Web存储。

存储类型	说明
localStorage	没有时间限制，浏览器关闭时数据不会丢失，用于持久化的本地存储。除非主动删除数据，否则数据永不过期。
sessionStorage	将数据保存在会话对象中，从进入网站都关闭浏览器这段时间为会话时间。session对象用来保存这段时间内所有要保存的数据。关闭浏览器后，数据删除。

localStorage用于永久保存数据，sessionStorage用于暂时保存数据。

3、Web存储的优缺点

Web存储的优点
类型	说明
存储空间更大	浏览器每个独立的存储空间都比Cookie大的多
存储内容不会发送到服务器	Web存储的数据仅存放在本地，不会和服务器进行任何交互
更多丰富易用的接口	提供了更丰富的接口，使数据操作更为简便
独立存储空间	每个域的存储空间独立，不会造成数据混乱

Web存储的缺点
类型	说明
可跨域访问	不同域的存储空间不能交叉访问，但域B中嵌入域A的脚本依然能访问域B的数据。
安全性差	存储在本地的数据未加密，容易造成隐私泄露。

二、使用Web存储

1、检查浏览器的支持性

使用Web存储前，必须检查浏览器的支持性

<body>
    <script>
        if (typeof(Storage) == "undefined") {
            document.write("浏览器不支持Web存储");
        } else {
            document.write("浏览器可以使用Web存储");
        }
    </script>
</body>

2、设置和获取数据

使用sessionStorage设置和获取网页中的简单数据主要有两种方式：Set/Get语法和点语法。

Set/Get语法

设置数据语法：

window.sessionStorage.setItem('FirstKey','FirstValue');

获取数据语法：

window.sessionStorage.getItem('FirstKey');

点语法

设置数据语法：

window.sessionStorage.FirstKey='FirstValue';

获取数据语法：

window.sessionStorage.Firstkey;

只要网页是同源的，基于相同的键，就能够在其他网页中获得设置在sessionStorage中的数据。localStorage和sessionStorage用法相同，把sessionStorage换成localStorage即可。

同源策略

一种约定，限制不同源的脚本或文本相互访问。网页同源即两个页面具有相同的协议、主机和域名，缺一不可。那么有时候需要访问其他域的数据，这时候就需要跨域处理。目前普遍使用JSONP、Proxy 、CORS来处理。

不同源会导致的问题：

1、Cookie、localStorage和indexDB无法读取

2、DOM无法获得

3、AJAX请求不能发送

3、Web存储的其他操作

操作	说明
获取对象长度	使用length属性获取目前Storage对象存储的键值对数量。
获取指定位置的键	通过key(index)方法获取
删除数据项	通过removeItem(key)删除数据项
清除所有数据	通过clear函数删除存储列表中的所有数据

4、监测Web存储事件

HTML5中，可以通过window对象的storage事件进行监听并指定事件处理函数，从而定义在其他页面中修改sessionStorage或localStorage的值时所要执行的处理。

window.addEventListener('storage',function(){
    //当sessionStorage或localStorage中的值发生变动时所要执行的处理
},false);

在事件处理函数中，触发事件的事件对象（event参数值）具有如下属性：

属性	说明
event.key	属性值为在sessionStorage或localStorage中被修改的数据键值。
event.oldValue	属性值为在sessionStorage或localStorage中被修改前的值。
event.newValue	属性值为在sessionStorage或localStorage中被修改后的值。
event.url	属性值为在sessionStorage或localStorage中值的页面URL地址。
event.storageArea	属性值为变动的sessionStorage或localStorage对象。

代码样例

storage.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改webStorage</title>
    <script>
        if (typeof(Storage) == "undefined") {
            document.write("浏览器不支持Web存储");
        }

        function setLocalStorage() {
            localStorage.test = document.getElementById("text1").value;
        }
    </script>
</head>

<body>
    <script>
    </script>
    输入一些值：<input type="text" id="text1" autocomplete="off" />
    <button onclick="setLocalStorage()">设置</button>
</body>

</html>

storage1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用storage事件实时监视webStorage中的数据</title>
    <script>
        window.addEventListener('storage', function() {
            if (event.key == "test") {
                var output = document.getElementById("output");
                output.innerHTML = "原有值：" + event.oldValue;
                output.innerHTML += "<br/>新值：" + event.newValue;
                output.innerHTML += "<br/>变动页面地址：" + event.url);
                console.log(event.storageArea);
                //此代码仅在Chrome浏览器中有效
                console.log(event.storageArea === localStorage);
            }
        }, false);

    </script>
</head>

<body>
    <output id="output"></output>
</body>

同时运行2个页面，在storage.html上输入2次值并按设置按钮，就能在storage1上看到新旧输入值的显示。

5、制作简单的网页皮肤

访问网站时，可以看到一些网站允许用户设置网站的主题风格。再次登录时，网站也能显示用户上一次设置的主题风格。

对于这种主题风格的设置可以使用localStorage存储来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的网页皮肤</title>
    <script>
        if (typeof(Storage) == "undefined") {
            document.write("浏览器不支持Web存储");
        }
        function bgchange(color) {
            document.getElementById("color").style.backgroundColor = color;
            window.localStorage.setItem("DivColor", color);
        }
        function load() {
            document.getElementById("color").style.backgroundColor =
                window.localStorage.getItem("DivColor");
        }
    </script>
</head>
<body onload="load()">
    <button id="btn_red" onclick="bgchange('red')">红色</button>
    <button id="btn_green" onclick="bgchange('green')">绿色</button>
    <button id="btn_blue" onclick="bgchange('blue')">蓝色</button>
    <div id="color" style="width: 500px; height: 400px; background-color: red;"></div>
</body>

</html>

三、本地数据库

1、基本概念

HTML4中，数据库只能放在服务器端，通过服务器访问数据库。HTML5则提供了2种本地数据库SQLLite和indexedDB。以下仅描述SQLLite数据库的内容。

2、数据库操作

（1）openDatabase方法创建数据库

var db = openDatabase('db', '1.0', '测试', 2 * 1024 * 1024);

第一个参数为数据库名称，第二个参数为版本号，第三个参数为数据库描述信息，第四个参数为数据库大小，第五个数据库为回调函数（可省略），创建数据库后调用。

（2）transaction方法执行事务处理

为了防止多人访问数据库时同时对同一个数据进行操作修改，采用事务处理，阻止其他用户访问数据库。transaction方法使用一个回调函数作为参数。transaction方法格式：

db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS stu(id unique,name)');
});

（3）executeSql执行SQL语句

回调函数的transaction对象的executeSql方法格式

transaction.executeSql(sqlquery,[],dataHandler,errorHandler);

第一个参数为需要执行的SQL语句，第二个参数为SQL语句中所用到的参数数组，SQL语句的参数使用"?"代替，然后依次把这些参数组成数组放入第二个参数中。

transaction.executeSql('update stu set name = ? where id = ?',[name,id]);

第三个参数为执行SQL语句成功时调用的回调语句

function dataHandler(transaction,results){
    //执行SQL语句成功时的处理
};

第四个参数为执行SQL语句失败时调用的回调语句

function errorHandler(transaction,errmsg){
    //执行SQL语句失败时的处理
};

（4）插入数据

db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS stu(id unique,name)');
    //常规插入
    tx.executeSql('INSERT INTO stu(id,name) VALUES(1,"张三")');
    tx.executeSql('INSERT INTO stu(id,name) VALUES(2,"李四")');
    //动态插入
    tx.executeSql('INSERT INTO stu(id,name) VALUES(?,?)', [sid, sname]);
});

（5）查询数据

db.transaction(function(tx) {
    tx.executeSql('select * from stu', [], function(tx, results) {
        var len = results.rows.length;
        msg = "<p>查询行数：" + len + "</p>";
        document.querySelector('#status').innerHTML += msg;
        for (var i = 0; i < len; i++) {
            var stu = results.rows.item(i);
            document.querySelector('#status').innerHTML += "<p>id：" + 
            stu.id + ",name：" + stu.name + "</p>";
            }
        }, null);
    });

查询数据时，设置executeSql语句的第三个参数处理查询成功的结果，返回结果数据集results，结果数据集results有rows属性，保存了查询的记录。rows.length获取记录的总数，以rows[index]或rows.item([index])读取第index+1条记录，使用for循环读取每条记录。Chrome浏览器可能不支持rows.item([index])的形式。

（6）修改数据

db.transaction(function(tx) {
    //常规更新
    tx.executeSql('update stu set name = "王五" where id = 1');
    //动态更新
    tx.executeSql('update stu set name = "王五" where id = ?',[id]);
});

（7）删除数据

db.transaction(function(tx) {
    //常规删除
    tx.executeSql('delete from stu where id = 1');
    //动态删除
    tx.executeSql('delete from stu where id = ?',[id]);
});

3、简单例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SQLite练习</title>
    <script>
        var db = openDatabase('db', '1.0', '测试', 2 * 1024 * 1024);
        db.transaction(function(tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS stu(id unique,name)');
            tx.executeSql('INSERT INTO stu(id,name) VALUES(1,"张三")');
            tx.executeSql('INSERT INTO stu(id,name) VALUES(2,"李四")');
        });
        db.transaction(function(tx) {
            tx.executeSql('SELECT * FROM stu', [], function(tx, results) {
                var len = results.rows.length;
                var msg = "<p>查询行数：" + len + "</p>";
                document.querySelector('#status').innerHTML += msg;
                for (var i = 0; i < len; i++) {
                    var stu = results.rows.item(i);
                    document.querySelector('#status').innerHTML += "<p>id：" 
                        + stu.id + ",name：" + stu.name + "</p>";
                }
            }, null);

        });
    </script>
</head>

<body>
    <h2>SQLLite数据库测试</h2>
    <div id="status" name="status"></div>
</body>

</html>