HTML5 web storage

Using HTML5 it is possible to store the user's browsing data locally.

Earlier, local storage used cookies. But Web storage needs to be more secure and fast. These data will not be saved on the server, but these data are only used for user request website data. It can also store a large amount of data without affecting the performance of the website.

The data exists in key/value pairs, and the data of the web page is only allowed to be accessed and used by the web page.

localStorage 和 sessionStorage

The two objects where the client stores data are:

localStorage - data storage with no time limit

SessionStorage--data storage for a session

Before using web storage, you should check if your browser supports localStorage and sessionStorage.

 
    if 
    ( 
    typeof 
    ( 
    Storage 
    ) 
    !== 
    " 
    undefined 
    " 
    ) 
   
    { 
       
        //  
    Yes! Support localStorage sessionStorage object! 
     
        //  
    some code..... 
   
    } 
      
    else 
   
    { 
       
    //  
    Sorry! Web storage is not supported. 
   
    }

localStorage object

The data stored by the localStorage object has no time limit. Data is still available after the next day, week or year.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Self-selected course (such as about Zhihui.com)</title>
	</head>
	<body > 
		<div id="result">
			<script>
				if(typeof(Storage) != "undefined")
				{
					localStorage.sitename="自学教程";
					document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
				}
				else
				{
					document.getElementById("result").innerHTML="对不起， 您的浏览器不支持 web 存储。"
				}
			</script>
		</div>
	</body>
</html>

实例解析：

使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

以上实例也可以这么写：

 
    // 
     存储 
   
 
     
     
    localStorage 
    . 
    sitename 
     =  
    " 
    菜鸟教程 
    " 
    ; 
   
 
    // 
     查找 
   
 
     
     
    document 
    . 
    getElementById 
    ( 
    " 
    result 
    " 
    ) 
    . 
    innerHTML 
     =  
    localStorage 
    . 
    sitename 
    ; 
   

移除 localStorage 中的 "lastname" :

 
    localStorage 
    . 
    removeItem 
    ( 
    " 
    lastname 
    " 
    ) 
    ; 
   

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
		<script>
			function clickCounter()
			{
				if(typeof(Storage) != "undefined")
				{
					if (localStorage.clickcount)
					{
						localStorage.clickcount=Number(localStorage.clickcount)+1;
					}
					else
					{
						localStorage.clickcount = 1;
					}
					document.getElementById("result").innerHTML="你已经点击了按钮" + localStorage.clickcount + "次";
				}
				else
				{
					document.getElementById("result").innerHTML="对不起， 您的浏览器不支持 web 存储。"
				}
			}
		</script>
	</head>
	<body > 
		<p><button onclick="clickCounter()" type="button">点我!</button></p>
		<div id="result"></div>
		<p>点击该按钮查看计数器的增加。</p>
		<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
	</body>
</html>

sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储，当用户关闭浏览器窗口后，数据会被删除。

创建并访问一个sessionStorage：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
		<script>
			function clickCounter()
			{
				if(typeof(Storage) != "undefined")
				{
					if (sessionStorage.clickcount)
					{
						sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
					}
					else
					{
						sessionStorage.clickcount = 1;
					}
					document.getElementById("result").innerHTML="你已经点击了按钮" + sessionStorage.clickcount + "次";
				}
				else
				{
					document.getElementById("result").innerHTML="对不起， 您的浏览器不支持 web 存储。"
				}
			}
		</script>
	</head>
	<body > 
		<p><button onclick="clickCounter()" type="button">点我!</button></p>
		<div id="result"></div>
		<p>点击该按钮查看计数器的增加。</p>
		<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
	</body>
</html>

Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

·可以输入网站名，网址，以网站名作为key存入localStorage;

·根据网站名，查找网站；

·列出当前已保存的所有网站；

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML5本地存储之Web Storage篇</title>
	</head>
	<body > 
		<div style="border:2px dashed #ccc; width:320px;text-align:center;">
			<label for="sitename">网站名(key):</label>
			<input type="text" id="sitename" name="sitename" class="text" />
			<br />
			<label for="siteurl">网 址(value)</label>
			<input type="text" id="siteurl" name="siteurl" />
			<br />
			<input type="button" onclick="save()" value="新增记录" />
			<hr />
			<label for="search_phone">输入网站名：</label>
			<input type="text" id="search_site" name="search_site">
			<input type="button" onclick="find()" value="查找网站" />
			<p id="find_result" ><br /></p>
		</div>
		<br />
		<div id="list"></div>
		<script>
			loadAll();
			
			function save(){
				var siteurl = document.getElementById("siteurl").value;
				var sitename = document.getElementById("sitename").value;
				localStorage.setItem(sitename, siteurl);
				alert("添加成功");
			}
			
			function find() {
				var search_site = document.getElementById("search_site").value;
				var siteurl = localStorage.getItem(search_site);
				var find_result = document.getElementById("find_result");
				find_result.innerHTML = search_site + "的网址是：" + siteurl;
			}
			
			 function loadAll(){  
				var list = document.getElementById("list");  
				if(localStorage.length>0){  
					var result = "<table border='1'>";  
					result += "<tr><td>key</td><td>value</td></tr>";  
					for(var i=0;i<localStorage.length;i++){  
						var sitename = localStorage.key(i);  
						var siteurl = localStorage.getItem(sitename);  
						result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";  
					}  
					result += "</table>";  
					list.innerHTML = result;  
				}else{  
					list.innerHTML = "数据为空……";  
				}  
			}      
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>HTML5本地存储之Web Storage篇</title>  
</head>  
<body>  
    <div style="border: 2px dashed #ccc;width:320px;text-align:center;">
        <label for="keyname">别名(key):</label>  
        <input type="text" id="keyname" name="keyname" class="text"/>  
        <br/>  
        <label for="sitename">网站名：</label>  
        <input type="text" id="sitename" name="sitename" class="text"/>  
        <br/>  
        <label for="siteurl">网 址：</label>  
        <input type="text" id="siteurl" name="siteurl"/>  
        <br/>  
        <input type="button" onclick="save()" value="新增记录"/>  
        <hr/>  
        <label for="search_phone">输入别名(key)：</label>  
        <input type="text" id="search_site" name="search_site"/>  
        <input type="button" onclick="find()" value="查找网站"/>  
        <p id="find_result"><br/></p>  
    </div>  
    <br/>  
    <div id="list">  
    </div>  
    <script>
    //保存数据  
    function save(){  
        var site = new Object;
        site.keyname = document.getElementById("keyname").value;
        site.sitename = document.getElementById("sitename").value;  
        site.siteurl = document.getElementById("siteurl").value;
        var str = JSON.stringify(site); // 将对象转换为字符串
        localStorage.setItem(site.keyname,str);  
        alert("保存成功");
    }  
    //查找数据  
    function find(){  
        var search_site = document.getElementById("search_site").value;  
        var str = localStorage.getItem(search_site);  
        var find_result = document.getElementById("find_result");
        var site = JSON.parse(str);  
        find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;  
    }  
    
    //将所有存储在localStorage中的对象提取出来，并展现到界面上
	// 确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错
    function loadAll(){  
        var list = document.getElementById("list");  
        if(localStorage.length>0){  
            var result = "<table border='1'>";  
            result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";  
            for(var i=0;i<localStorage.length;i++){ 
                var keyname = localStorage.key(i);  
                var str = localStorage.getItem(keyname);  
                var site = JSON.parse(str);  
                result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";  
            }  
            result += "</table>";  
            list.innerHTML = result;  
        }else{  
            list.innerHTML = "数据为空...";  
        }  
    }  
    </script>
</body>  
</html>

笔记

增加删除功能:

1.增加网名输入框和删除按钮

<label for="2search_phone">输入网站名：</label>  
<input type="text" id="delete_site" name="delete_site"/>  
<input type="button" onclick="remove2()" value="删除网站"/> 
<p id="delete_result"><br/></p>

2.增加删除函数

//删除数据
function removesite(){   
    var delete_site = document.getElementById("delete_site").value;  
    var siteurl = localStorage.getItem(delete_site);  
    var delete_result = document.getElementById("delete_result");  
    delete_result.innerHTML = delete_site + "的网址是：" + siteurl;  
    localStorage.removeItem(delete_site);
    //删除后刷新数据列表 loadAll();
}

Guess you like