欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-14 10:29:53
html5中的web存储与应用缓存详细讲解 缓存: * 页面缓存: html、js、css等,这些缓存资源是由于的行为而产生;  * 数据缓存 ---appcache:  cac...

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='to-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中的数据。