HTML5如何使用Web Storage储存？Web Storage储存的2种方式（示例）

为了破解Cookie的一系列限制（主要是cookie的大小和多少都受限制，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用），HTML5通过JS的新的API就能直接存储大量的数据到客户端浏览器，而且支持复杂的本地数据库，让JS更有效率。HTML5支持两种的webstorage：永久性的本地存储（localStorage），会话级别的本地存储（sessionStorage）。下面就让我们来了解一下HTML5如何使用Web Storage储存，介绍Web Storage储存的2种方式，希望对大家有所帮助！

一：localStorage（永久性的本地存储）

一直存储在本地，数据存储是永久的，除非用户或程序对其进行删除操作；localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

特点：
① 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。
② 数据不会随着Http请求发送到后台服务器；
③ 存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB。

!DOCTYPE html>
    html>
    	head>
    		meta charset="UTF-8">
    		tITle>
    localStorage/title>
    	/head>
    	body>
    		script type="text/javascript">
            //添加key-value 数据到 localStorage        localStorage.setItem("localStorage", "http://127.0.0.1:8020");
            //通过key来获取value        VAR dt = localStorage.getItem("localStorage");
            alert(dt);
            //清空所有的key-value数据。        //localStorage.clear();
            alert(localStorage.length);
        /script>
    	/body>
    /html>
    

效果图：

localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeitem(key):通过key删除本地数据。
（4）clear():清空数据。

二.sessionStorage（会话级别的本地存储）

在会话期内有效，数据在浏览器关闭后自动删除；

特点：会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。

!DOCTYPE html>
    html>
    	head>
    		meta charset="UTF-8">
    		title>
    sessionStorage/title>
    	/head>
    	body>
    		script type="text/javascript">
            //添加key-value 数据到 sessionStorage        sessionStorage.setItem("sessionStorage", "http://127.0.0.1:8020");
            //通过key来获取value        var dt = sessionStorage.getItem("sessionStorage");
            alert(dt);
            //清空所有的key-value数据。        //sessionStorage.clear();
            alert(sessionStorage.length);
        /script>
    	/body>
    /html>
    

效果图：

sessionStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeItem(key):通过key删除本地数据。
（4）clear():清空数据。

以上就是HTML5如何使用Web Storage储存？Web Storage储存的2种方式（示例）的详细内容，更多请关注其它相关文章！

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