zoukankan      html  css  js  c++  java
  • HTML 5 中WebStorage实现数据本地存储

    webstorage 分sessionStorage和localstorage,sessionStorage是暂时保存,localStorage是永久保存。 sessionStorage假设浏览器关闭了,数据就没有了。而localStorage则不会。

    sessionStorage:
    保存数据     sessionStorage.setItem(key, value);
    读取数据     sessionStorage.getItem(key);
    localStorage:
    保存数据     localStorage.setItem(key, value);
    读取数据     localStorage.getItem(key);

     

    演示样例

    <span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script language="JavaScript">
    			
    			function saveStorage(id){
    				var target = document.getElementById(id);
         		    var str = target.value;
                    sessionStorage.setItem("msg", str);
    			}
    			
    			function loadStorage(id){
    				var target = document.getElementById(id);
         			var msg = sessionStorage.getItem("msg");
         			target.innerHTML = msg;
    			}
    			
    		</script>
    	</head>
    	<body>
    		<p id="msg"></p>
    		<input type="text" id="input"/>
    		<button onclick="saveStorage('input')">保存数据</button>
    		<button onclick="loadStorage('msg')">获取数据</button>
    	</body>
    </html></span>

    假设使用得好,也可将webStorage作为一个简易的数据库,键的值採用JSON字符串就能够。当然这仅仅是能够实现,运用的时候,webStorage的空间还是非常珍贵的。一般大多数浏览器都仅仅提供5M左右的空间。

  • 相关阅读:
    2018-5-30 总结
    【数据结构系列】线段树(Segment Tree)
    Google Summer of Code 2017 经验谈
    二分查找
    Binary Indexed Tree
    Github-flavored Markdown 导出为 PDF
    Programming Languages
    Select 选择算法
    取样算法
    HTTP Status 500-Servlet.init() for servlet [springmvc] threw exception解决办法
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/8318560.html
Copyright © 2011-2022 走看看