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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
JavaScript实现移动端拖动元素
Nov 24 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
js实现蒙版效果
2020/01/11 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
公开服务承诺制度
2014/03/26 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
工作简报怎么写
2015/07/21 职场文书
公司董事任命书
2015/09/21 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
修改并编译golang源码的操作步骤
2021/07/25 Golang