JS本地存储信息的实现方式（localStorage 与 userData）

详细介绍请看：

http://www.cnblogs.com/beiyuu/archive/2011/07/20/js-localstorage-userdata.html

 

里面涉及到的 demo 代码如下：

<script type="text/javascript">
(function() {
	window.localData = {
		hname : location.hostname ? location.hostname : 'localStatus',
		isLocalStorage : window.localStorage ? true : false,
		dataDom : null,
		initDom : function() {
			if (!this.dataDom) {
				try {
					this.dataDom = document.createElement('input');
					this.dataDom.type = 'hidden';
					this.dataDom.style.display = "none";
					this.dataDom.addBehavior('#default#userData');
					document.body.appendChild(this.dataDom);
					var exDate = new Date();
					exDate = exDate.getDate() + 30;
					this.dataDom.expires = exDate.toUTCString();
				} catch (ex) {
					return false;
				}
			}
			return true;
		},
		set : function(key, value) {
			if (this.isLocalStorage) {
				window.localStorage.setItem(key, value);
			} else {
				if (this.initDom()) {
					this.dataDom.load(this.hname);
					this.dataDom.setAttribute(key, value);
					this.dataDom.save(this.hname)
				}
			}
		},
		get : function(key) {
			if (this.isLocalStorage) {
				return window.localStorage.getItem(key);
			} else {
				if (this.initDom()) {
					this.dataDom.load(this.hname);
					return this.dataDom.getAttribute(key);
				}
			}
		},
		remove : function(key) {
			if (this.isLocalStorage) {
				localStorage.removeItem(key);
			} else {
				if (this.initDom()) {
					this.dataDom.load(this.hname);
					this.dataDom.removeAttribute(key);
					this.dataDom.save(this.hname)
				}
			}
		}
	};

	var text = document.getElementById('localDataHook');
	var btn = document.getElementById('clearBtnHook');
	window.onbeforeunload = function() {
		localData.set('beiyuuData', text.value);
	};

	btn.onclick = function() {
		localData.remove('beiyuuData');
		text.value = ''
	};

	if (localData.get('beiyuuData')) {
		text.value = localData.get('beiyuuData');
	}
})();
</script>

 

还有一个比较实用的技术，阻止页面关闭，显示 关闭页面确认弹出框，参考代码如下：

window.onbeforeunload = function() {
	if (!canLeavePage()) {
		return ('确认离开当前页面吗？未保存的数据将会丢失！');
	}
};