JavaScript本地存储实现：localStorage、userData与sessionStorage详解

作者：拾光时间：2026-10-21 22:21:30浏览：93

本文详细解析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程序设计有所帮助。

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58