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

Posted 2020-08-28 52PHP

详细介绍请看：

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 (\'确认离开当前页面吗？未保存的数据将会丢失！\');
	}
};