本文详细解析JavaScript实现本地存储的多种方案，重点对比localStorage与userData的语法、属性及方法。通过封装通用工具类实现数据的存取与删除，并演示如何阻止页面意外关闭以保存未提交数据，帮助开发者根据兼容性需求选择合适存储策略。
JavaScript本地存储方案概述
本文详细介绍JavaScript实现本地数据存储的具体方法，旨在为开发者提供参考与借鉴。
随着Web应用的快速发展，在客户端本地存储数据已成为重要需求。虽然Cookie是最常见的方案，但其容量和传输开销存在明显局限。其他替代方案包括IE6及以上版本的userData、Firefox的globalStorage以及Flash本地存储，除Flash外，其余方案均存在不同程度的浏览器兼容性问题。
Web Storage标准：sessionStorage与localStorage
sessionStorage与localStorage
Web Storage标准实际上包含两个主要部分：sessionStorage和localStorage。
sessionStorage用于在单个会话期间本地存储数据。这些数据仅对同一会话中的页面可见，且当会话结束时数据即被销毁。因此，sessionStorage并非持久化存储，仅属于会话级别的临时存储。
localStorage用于实现持久化的本地存储。除非用户或程序主动删除数据，否则这些数据将永久保留，不会过期。
IE专属存储：userData行为详解
userData
语法定义如下：
XML <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" /> HTML <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID> Scripting object .style.behavior = "url('#default#userData')" object .addBehavior ("#default#userData")
主要属性包括：
expires 用于设置或获取userData行为保存数据的失效日期。 XMLDocument 用于获取XML文档的引用。
核心方法如下：
getAttribute() 获取指定的属性值。
load(object) 从userData存储区载入存储的对象数据。
removeAttribute() 移除对象的指定属性。
save(object) 将对象数据存储到一个userData存储区。
setAttribute() 设置指定的属性值。
localStorage标准API方法
localStorage
主要操作方法包括：
localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值
本地存储工具类封装与页面关闭拦截
封装实现
localData = {
hname:location.hostname?location.hostname:'localStatus',
isLocalStorage:window.localStorage?true:false,
dataDom:null,
initDom:function(){ //初始化userData
if(!this.dataDom){
try{
this.dataDom = document.createElement('input');//这里使用hidden的input元素
this.dataDom.type = 'hidden';
this.dataDom.style.display = "none";
this.dataDom.addBehavior('#default#userData');//这是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)
}
}
}
}
使用方式十分简便，本节主要展示set、get和remove三个核心功能的实现。
相关演示代码如下：
<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 ('确认离开当前页面吗？未保存的数据将会丢失！');
}
};
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。