首页前端开发HTMLHTML5中的Web存储与应用缓存详细讲解

HTML5中的Web存储与应用缓存详细讲解

时间2024-01-26 18:42:02发布访客分类HTML浏览507
导读：收集整理的这篇文章主要介绍了html5教程-HTML5中的Web存储与应用缓存详细讲解，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 HTML5中...
收集整理的这篇文章主要介绍了html5教程-HTML5中的Web存储与应用缓存详细讲解，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

HTML5中的Web存储与应用缓存详细讲解

缓存：

* 页面缓存: htML、JS、CSS等,这些缓存资源是由于浏览器的行为而产生;  

* 数据缓存

---AppCache:  Cache Manifest 操作：

    * 需要服务器与客户端相互配合； 

    * 所有的缓存数据都由开发者直接完全地掌控。

---DOM Storage（Web Storage）： 

    * local storage和session storage；

    * 存储一些简单的用key/value对即可解决的数据

HTML5的LocalStorage和sessionStorage

在HTML5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。

前言：由于web SQL的实现是基于SQLITe，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于html 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

1、web Storage（LocalStorage + sessionStorage）

web Storage 是HTML5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

1.setItem (key, value) —— 保存数据，以键值对的方式储存信息。

2.getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。

3.removeitem (key) —— 删除单个数据，根据键值移除对应的信息。

4.clear () —— 删除所有的数据

5.key (index) —— 获取某个索引的key

1.1 localStorage和sessionStorage的方法

setItem存储value

sessionStorage.setItem(“key”, “value”);

localStorage.setItem(“site”, “js8.in”);

getItem获取value

VAR value = sessionStorage.getItem(“key”);

var site = localStorage.getItem(“site”);

removeItem删除key

sessionStorage.removeItem(“key”);

localStorage.removeItem(“site”);

clear清除所有的key/value

sessionStorage.clear();

localStorage.clear();

综合案例1

var storage = null;  

if(window.localStorage){              //判断浏览器是否支持localStorage  

   storage = window.localStorage;       

   storage.setItem("name", "Rick");    //调用setItem方法，存储数据  

   alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  

   storage.removeItem("name");     //调用removeItem方法，移除数据  

   alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null  

}  

综合案例2 —— 实际开发

const STORAGE_KEY='toDOS-vuejs'   

 // const是ES6中的语法，todos-vuejs是保存的键

// 导出

export default {

    fetch:function(){     // 取出数据  —— 注意：localStorage是json格式的数据，需要转为数组使用

       return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]');

    } ,

    save:function(items){   // 保存数据

        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))

    }

}

1.2其他操作方法：点操作和[ ]

web Storage可以像普通对象一样用点(.)操作符，及[ ]的方式进行数据存储，像如下的代码：

    var storage = window.localStorage;  

    storage.key1 = "hello";  

    storage["key2"] = "world";  

    console.LOG(storage.key1);  

    console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历例如下面的代码：

var storage = window.localStorage;  

for (var i=0, len = storage.length; i    len; i++){     

    var key = storage.key(i);     

    var value = storage.getItem(key);     

    console.log(key + "=" + value);  

}

2、storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){

    window.addEventListener("storage",handle_storage,false);

}

else if(window.attachEvent){

    window.attachEvent("onstorage",handle_storage);

}  

function handle_storage(e){     

    if(!e){

        e=window.event;

    }

}

3、两者之间的区别

3.1 LocalStorage和sessionStorage功能

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

3.2 localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

sessionStorage需要注意的有以下几点：

（1）页面刷新不会消除数据，浏览器或者页面关闭才会清除数据；

（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；

（3）使用window.oPEn打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

（4）sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效；

（5）大小不超过5M；

（6）不自动发送数据到服务器

验证：准备两个html文件，index.html和text.html。

index.html代码

!DOCTYPE html>  

html lang="en">  

head>  

    meta charset="UTF-8">  

    title> index/title>  

    script>  

        function submit() {  

            var str = document.getElementById("text").value.trim();

            if(str === '') {

                return;

            }  

            setInfo(str);  

            document.getElementById("text").value = "";  

        }  

        //储存数据  

        function setInfo(name) {  

            var storage = window.sessionStorage;  

            storage.setItem('name', name);  

        }  

        //显示数据  

        function shows() {  

           var storage = window.sessionStorage;  

           var str = ' ' + storage.getItem("name");  

           document.getElementById("text").value = str;  

        }  

     /script>  

/head>  

body>  

      Your name is:input type="text" name="text" id="text" />  

     input type="button" value="Login" onclick="submit()" />  

     input type="button" value="show" onclick="shows()" />  

     a href="text.html" target="_blank"> 点击打开/a>  

/body>  

/html>

test.html代码

 !DOCTYPE html>  

    html lang="en">  

    head>  

        meta charset="UTF-8">  

        title> Title/title>  

    /head>  

    body>  

     script>  

         var storage = window.sessionStorage;  

         alert(storage.getItem("name"));  

     /script>  

    /body>  

/html>

（1）页面刷新不会消除数据

当点击show按钮后，输入框内显示 “null“，此时sessionStorage中没有存储key为 ”name“的数据。

当在文本中输入”Rick“后，点击login按钮，待输入框清空的时候，数据已经存储到sessionStorage中，再去点击show按钮，会显示” Rick“

此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”Rick“。

（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；

点击页面上的 “点击打开” ，就会弹出对应的index.html文件存储的sessionStorage数据

其他说明：

后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。

HTML5中的Web存储与应用缓存详细讲解

缓存：

* 页面缓存: html、JS、CSS等,这些缓存资源是由于浏览器的行为而产生;  

* 数据缓存

---AppCache:  Cache Manifest 操作：

    * 需要服务器与客户端相互配合； 

    * 所有的缓存数据都由开发者直接完全地掌控。

---DOM Storage（Web Storage）： 

    * local storage和session storage；

    * 存储一些简单的用key/value对即可解决的数据

HTML5的LocalStorage和sessionStorage

在HTML5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。

前言：由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

1、web Storage（LocalStorage + sessionStorage）

web Storage 是HTML5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

1.setItem (key, value) —— 保存数据，以键值对的方式储存信息。

2.getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。

3.removeItem (key) —— 删除单个数据，根据键值移除对应的信息。

4.clear () —— 删除所有的数据

5.key (index) —— 获取某个索引的key

1.1 localStorage和sessionStorage的方法

setItem存储value

sessionStorage.setItem(“key”, “value”);

localStorage.setItem(“site”, “js8.in”);

getItem获取value

var value = sessionStorage.getItem(“key”);

var site = localStorage.getItem(“site”);

removeItem删除key

sessionStorage.removeItem(“key”);

localStorage.removeItem(“site”);

clear清除所有的key/value

sessionStorage.clear();

localStorage.clear();

综合案例1

var storage = null;  

if(window.localStorage){              //判断浏览器是否支持localStorage  

   storage = window.localStorage;       

   storage.setItem("name", "Rick");    //调用setItem方法，存储数据  

   alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  

   storage.removeItem("name");     //调用removeItem方法，移除数据  

   alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null  

}  

综合案例2 —— 实际开发

const STORAGE_KEY='todos-vuejs'   

 // const是ES6中的语法，todos-vuejs是保存的键

// 导出

export default {

    fetch:function(){     // 取出数据  —— 注意：localStorage是json格式的数据，需要转为数组使用

       return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]');

    } ,

    save:function(items){   // 保存数据

        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))

    }

}

1.2其他操作方法：点操作和[ ]

web Storage可以像普通对象一样用点(.)操作符，及[ ]的方式进行数据存储，像如下的代码：

    var storage = window.localStorage;  

    storage.key1 = "hello";  

    storage["key2"] = "world";  

    console.log(storage.key1);  

    console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历例如下面的代码：

var storage = window.localStorage;  

for (var i=0, len = storage.length; i    len; i++){     

    var key = storage.key(i);     

    var value = storage.getItem(key);     

    console.log(key + "=" + value);  

}

2、storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){

    window.addEventListener("storage",handle_storage,false);

}

else if(window.attachEvent){

    window.attachEvent("onstorage",handle_storage);

}  

function handle_storage(e){     

    if(!e){

        e=window.event;

    }

}

3、两者之间的区别

3.1 LocalStorage和sessionStorage功能

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

3.2 localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

sessionStorage需要注意的有以下几点：

（1）页面刷新不会消除数据，浏览器或者页面关闭才会清除数据；

（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；

（3）使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

（4）sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效；

（5）大小不超过5M；

（6）不自动发送数据到服务器

验证：准备两个html文件，index.html和text.html。

index.html代码

!DOCTYPE html>  

html lang="en">  

head>  

    meta charset="UTF-8">  

    title> index/title>  

    script>  

        function submit() {  

            var str = document.getElementById("text").value.trim();

            if(str === '') {

                return;

            }  

            setInfo(str);  

            document.getElementById("text").value = "";  

        }  

        //储存数据  

        function setInfo(name) {  

            var storage = window.sessionStorage;  

            storage.setItem('name', name);  

        }  

        //显示数据  

        function shows() {  

           var storage = window.sessionStorage;  

           var str = ' ' + storage.getItem("name");  

           document.getElementById("text").value = str;  

        }  

     /script>  

/head>  

body>  

      Your name is:input type="text" name="text" id="text" />  

     input type="button" value="Login" onclick="submit()" />  

     input type="button" value="show" onclick="shows()" />  

     a href="text.html" target="_blank"> 点击打开/a>  

/body>  

/html>

test.html代码

 !DOCTYPE html>  

    html lang="en">  

    head>  

        meta charset="UTF-8">  

        title> Title/title>  

    /head>  

    body>  

     script>  

         var storage = window.sessionStorage;  

         alert(storage.getItem("name"));  

     /script>  

    /body>  

/html>

（1）页面刷新不会消除数据

当点击show按钮后，输入框内显示 “null“，此时sessionStorage中没有存储key为 ”name“的数据。

当在文本中输入”Rick“后，点击login按钮，待输入框清空的时候，数据已经存储到sessionStorage中，再去点击show按钮，会显示” Rick“

此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”Rick“。

（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；

点击页面上的 “点击打开” ，就会弹出对应的index.html文件存储的sessionStorage数据

其他说明：

后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

APIconstCSSdivDOMes6exportHTMLpost-format-galleryVuevuejs数组

若转载请注明出处： HTML5中的Web存储与应用缓存详细讲解
本文地址： https://pptw.com/jishu/587134.html
树形数据展示方式+H5拖动效果实例 HTML5游戏开发进阶篇之单位智能移动实现教程

游客 回复需填写必要信息
↑