HTML 5 本地存储----LocalStorage 小DEMO

Love The Way You Lie 2022-06-11 05:47 168阅读 0赞

## 在客户端存储数据 ##

HTML5 提供了两种在客户端存储数据的新方法：

*  localStorage - 没有时间限制的数据存储
 *  sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

## localStorage 方法 ##

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

下面写一个本地存储数据的小DEMO

<!DOCTYPE html>
    <html>
    <head>
    <title>浏览器本地存储</title>
    <meta charset="utf-8"/> 
    </head>
    <body>
    <p>你浏览这一页<span id="count">0</span> 次</p>
    <p><input type="button" name="changeStorage" value="changeStorage" onClick="changeS()"></p>
    <script type="text/javascript">
    	var storage = window.localStorage;
    	if(!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount", 0);
    	storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;     //必须进行格式转换
    	document.getElementById("count").innerHTML = storage.pageLoadCount;
    	showStorage();
    	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;
    		}
    		showObject(e);
    	}
    	function showObject(obj){
    		//递归显示object
    		if(!obj){
    			return ;
    		}
    		for (var i in obj) {
    			if (typeof(obj[i])!="object" || obj[i] == null) {
                   document.write(i + ":" + obj[i] + "<br/>");
    			}
    			else{
    				document.write(i + ":object" + "<br/>");
    			}
    		}
    	}
    
    	storage.setItem("a",5);
    	function changeS() {
    		//修改一个键值，测试storage事件
    		if(!storage.getItem("b")){
    			storage.setItem("b",0);
    		}
    		storage.setItem('b',parseInt(storage.getItem('b'))+1);
    	}
    
    	function showStorage() {
            //循环显示localStorage里的键值对
            for(var i=0; i<storage.length; i++){
            	//key(i)获得相应的键，再用getItem()方法获得相应的值
            	document.write(storage.key(i) + ":" + storage.getItem(storage.key(i)) + "<br>");
            }
    	}
    </script>
    </body>
    </html>

截图：

![Center][]

![Center 1][]

总结：将部分数据读写在本地LocalStorage下，大大降低的数据库的查询访问压力，以提高系统的性能。

[Center]: /images/20220611/9521f51ae43b4f40a2f357989ef64f81.png
[Center 1]: /images/20220611/8db3e4c0c77643cab781788448d1dab8.png