JS实现本地存储信息的方法(基于localStorage与userData)


Posted in Javascript onFebruary 18, 2017

本文实例讲述了JS实现本地存储信息的方法。分享给大家供大家参考,具体如下:

WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题。

sessionStorage与localStorage

Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

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 behavior 保存数据的失效日期。
XMLDocument 获取 XML 的引用。

方法:

getAttribute() 获取指定的属性值。
load(object) 从 userData 存储区载入存储的对象数据。
removeAttribute() 移除对象的指定属性。
save(object) 将对象数据存储到一个 userData 存储区。
setAttribute() 设置指定的属性值。

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就好了。

里面涉及到的 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 ('确认离开当前页面吗?未保存的数据将会丢失!');
  }
};

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 #Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 #Javascript
JS设置时间无效问题的解决办法
Feb 18 #Javascript
js的OOP继承实现(必看篇)
Feb 18 #Javascript
jQuery仿IOS弹出框插件
Feb 18 #Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 #Javascript
angular ng-repeat数组中的数组实例
Feb 18 #Javascript
You might like
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript新手语法小结
2008/06/15 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
three.js快速入门【推荐】
2017/01/21 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
详解JS模块导入导出
2017/12/20 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
django认证系统 Authentication使用详解
2019/07/22 Python
简单了解python数组的基本操作
2019/11/26 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
pandas DataFrame运算的实现
2020/06/14 Python
python 基于opencv实现图像增强
2020/12/23 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
幼儿园庆六一活动方案
2014/03/06 职场文书
中学生评语大全
2014/04/18 职场文书
后进生评语大全
2015/01/04 职场文书
乐山大佛导游词
2015/02/02 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python