`
jsczxy2
  • 浏览: 1277071 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

localStorage的使用和封装

阅读更多
(function(window,localStorage,undefined){
var LS = {
    set : function(key, value){
        //在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误
        //这时一般在setItem之前,先removeItem()就ok了
        if( this.get(key) !== null )
            this.remove(key);
        localStorage.setItem(key, value);
    },
    //查询不存在的key时,有的浏览器返回undefined,这里统一返回null
    get : function(key){
        var v = localStorage.getItem(key);
        return v === undefined ? null : v;
    },
    remove : function(key){ localStorage.removeItem(key); },
    clear : function(){ localStorage.clear(); },
    each : function(fn){
        var n = localStorage.length, i = 0, fn = fn || function(){}, key;
        for(; i<n; i++){
            key = localStorage.key(i);
            if( fn.call(this, key, this.get(key)) === false )
                break;
            //如果内容被删除,则总长度和索引都同步减少
            if( localStorage.length < n ){
                n --;
                i --;
            }
        }
    }
},
j = window.jQuery;
//扩展到相应的对象上
window.LS = window.LS || LS;
//扩展到其他主要对象上
if(j) j.LS = j.LS || LS;
})(window,window.localStorage);

 

var 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){
            if( this.get(key) !== null )  
            	this.remove(key);  
            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){
        	var v = window.localStorage.getItem(key);  
	        return v === undefined ? null : v;
        }else{
            if(this.initDom()){
                this.dataDom.load(this.hname);
                return this.dataDom.getAttribute(key);
            }
        }
    },
    remove:function(key){
        if(this.isLocalStorage){
            window.localStorage.removeItem(key);
        }else{
            if(this.initDom()){
                this.dataDom.load(this.hname);
                this.dataDom.removeAttribute(key);
                this.dataDom.save(this.hname)
            }
        }
    } 
}

 

分享到:
评论

相关推荐

    vue使用二次封装存储localStorage

    以下是一个简单的Vue localStorage封装示例: 1. 创建一个名为`localStorageService.js`的文件,作为我们的封装工具: ```javascript import Vue from 'vue' const localStorageService = { setItem(key, value) ...

    使用Typescript编写更加易用的localStorage和sessionStorage的API

    这个类中,`setItem`和`getItem`方法都使用了`JSON.stringify`和`JSON.parse`进行数据的序列化和反序列化,以适应`localStorage`的字符串存储需求。同时,通过类型注解,我们确保了在设置和获取值时的类型安全。 ...

    storejs本地存储localstorage的封装提供简单的API没有依赖

    "storejs本地存储localstorage的封装提供简单的API没有依赖" 这个标题告诉我们,storejs是一个专门针对浏览器本地存储机制——localStorage的轻量级库。它通过封装localStorage,为开发者提供了更易用的API接口,...

    一种更好的方法来使用localStorage和sessionStorage

    1. **封装API**: 创建一个自定义的存储库,封装`localStorage`和`sessionStorage`的常用操作,如`set`, `get`, `remove`, `clear`等,这样可以使代码更加模块化,易于维护和测试。 2. **数据序列化与反序列化**: ...

    30-localStorage封装.html

    30-localStorage封装

    30-localStorage封装.js

    30-localStorage封装

    30-localStorage封装.ts

    30-localStorage封装

    vue实现localStorage工具类

    在本篇文档中,我们将深入探讨如何在Vue项目中实现一个`localStorage`的封装工具类,以便更好地管理和利用浏览器的本地存储功能。此外,我们还将了解如何实现缓存数据的自动过期机制,确保数据的有效性和安全性。 #...

    H5打包成安卓app后,js的localstorage失效报错.pdf

    在将H5应用打包成Android...解决这个问题需要理解Android Webview的工作原理,以及如何在Android端正确配置和使用`localStorage`。通过与Android开发者的紧密合作,我们可以确保H5应用在打包后的功能完整性和用户体验。

    基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip

    这个"基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip"提供了一个经过优化的JavaScript组件,旨在使localStorage的使用更加方便和通用。 localStorage主要提供了两个方法:`setItem`和`...

    离线存储,改进。使用简单但功能强大的API封装IndexedDB、WebSQL或localStorage.zip

    使用简单但功能强大的API封装IndexedDB、WebSQL或localStorage"很可能就是一个这样的工具。它可能通过一个一致的接口来抽象出这三种存储方式,使得开发者无需关心底层实现,只需调用统一的API就能进行数据操作。 ...

    localstorage.js

    带有过期时间的localStorage二次封装

    全浏览器兼容localStorage组件

    4. `LICENSE`:组件的开源许可证,规定了使用和分发的规则。 通过这个组件,开发者可以放心地在各种浏览器环境下使用`localStorage`,不必担心兼容性问题,从而专注于应用功能的开发。同时,该组件的可扩展性和灵活...

    Node.js-webStorage封装库-支持cookie解决方案

    总结来说,"Node.js-webStorage封装库-支持cookie解决方案"是一个旨在简化客户端数据存储并增强其功能的工具,它通过提供统一的接口和扩展功能,使得开发者在处理localStorage、sessionStorage和cookie时更为...

    electron-localStorage:在eletron主线程也能使用的localStorage

    于是手动封装了一个可以在主进程中调用的localstorage。1.安装npm install electron-localstorage2.引用:const storage = require('electron-localstorage');3.使用3.1完美支持所有localStorage的所有api:存储数据...

    localstorage和sessionstorage使用记录(推荐)

    使用`localStorage`和`sessionStorage`的基本方法包括`setItem`、`getItem`、`removeItem`和`clear`: - `setItem(key, value)`:将键值对存储到本地存储中,如`localStorage.setItem('key', 'value')`。 - `...

    前端项目-js-data-localstorage.zip

    在"js-data-localstorage-master"这个压缩包里,我们可以预期找到一个封装了`localStorage`操作的库或框架。这个适配器可能包含以下功能: 1. **键值对操作**:提供简便的方法来设置、获取、更新和删除`...

    localstorage-ns-源码.rar

    通过阅读源码,我们可以学习到如何使用闭包封装原始的 localStorage,以及如何在命名空间下进行数据操作的实现细节,包括键名的前缀处理、错误处理和兼容性考虑。 在实际开发中,合理利用 localStorage-ns 可以使...

    cookie,localStorage,sessionStorage区别与应用

    cookie localStorage sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息,只能存放字符串类型数据 同localStorage ...不好用,自己封装 还好 还好 应用 判断用户知否登录 购物车信息

Global site tag (gtag.js) - Google Analytics