appcan localStorage 本地存储

今天逛论坛，发现好多童鞋还是不大了解html5里面的本地存储功能，下面简单说明下。html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。web storage和cookie的区别Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生好了下面就展示下如何使用吧。封装下loaclstorage的代码。

 

 

/**
* 设置或读取localstorage
* 
* @param {}
*            key 只有key的时候，取值
* @param {}
*            value 设置值
* @return {}
*/
function localCache(key, value) {
        if (window.localStorage) {
                if (arguments.length == 1) {
                        var value = localStorage.getItem(arguments[0])
                        return value;
                } else {
                        if (arguments.length == 2) {
                                localStorage.removeItem(arguments[0]);
                                return localStorage.setItem(arguments[0], arguments[1]);
                        }
                }
        } else {
                alert('不支持localStorage');
        }
}

 

封装sessionstorage的例子

/**
* 设置或读取sessionStorage
* 
* @param {}
*            key 只有key的时候，取值
* @param {}
*            value  设置值
* @return {}
*/
function sessionCache(key, value) {
        if (window.sessionStorage) {
                if (arguments.length == 1) {
                        var value = sessionStorage.getItem(arguments[0]);
                        return value;
                } else {
                        if (arguments.length == 2) {
                                sessionStorage.removeItem(arguments[0]);
                                var r = sessionStorage.setItem(arguments[0], arguments[1]);
                                return r;
                        }
                }
        } else {
                alert('不支持sessionStorage');
        }
}

复制代码

封装删除的函数

/**
* 删除localStorage
* 
* @param {}
*            key 为空则删除所有
* @return {}
*/
function delLocalCache(key) {
        if (window.localStorage) {
                if (key) {
                        return localStorage.removeItem(key);
                } else {
                        localStorage.clear();
                }
        } else {
                alert('不支持localStorage');
        }
}

 

使用方法简单说明如下,sessionstorage一样的，可以看js封装的说明：

function testStorage(){
        localCache('name',"张三");//保存一个key为name，值为张三到localstorage
        localCache('name');//读取localstorage里面key为name的值，会返回 '张三'
}