欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

JQuery和JS操作LocalStorage/SessionStorage的方法 getStorage setStorage 有大用

JQuery和JS操作LocalStorage/SessionStorage的方法

0.316字数 679阅读 2,555

LocalStorage和SessionStorage

image.png

LocalStorage

localStorage方法用来在本地存储数据。比如用户刚刚已经填过一次资料,后返回这一页查看,需要之前填的信息都显示着。

是对Cookie的优化
没有时间限制的数据存储
在隐私模式下不可读取
大小限制在500万字符左右,各个浏览器不一致
在所有同源窗口中都是共享的
本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存)
不能被爬虫爬取,不要用它完全取代URL传参
IE7及以下不支持外,其他标准浏览器都完全支持

SessionStorage

针对一个 session 的数据存储
大小限制在5M左右,各个浏览器不一致
仅在当前浏览器窗口关闭前有效(适合会话验证)
不在不同的浏览器窗口中共享,即使是同一个页面

JS下的操作方法

获取键值:localStorage.getItem(“key”)
设置键值:localStorage.setItem(“key”,”value”)
清除键值:localStorage.removeItem(“key”)
清除所有键值:localStorage.clear()
获取键值2:localStorage.keyName
设置键值2:localStorage.keyName = “value”

JQ下的操作方法(JS方法前加”window.”)

获取键值:window.localStorage.getItem(“key”)
设置键值:window.localStorage.setItem(“key”,”value”)
清除键值:window.localStorage.removeItem(“key”)
清除所有键值:window.localStorage.clear()
获取键值2:window.localStorage.keyName
设置键值2:window.localStorage.keyName = “value”

1.localStorage的写入,localStorage的写入有三种方法,这里介绍一下:

localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage

存储进去的是int类型,但是打印出来却是string类型,这个与localStorage本身的特点有关,localStorage只支持string类型的存储。

        if(!window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //1 写入a字段
            storage["a"]=1;
            //2写入b字段
            storage.b=1;
            //3写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }
image.png

2.localStorage的读取

三种对localStorage的读取,其中官方推荐的是getItem\setItem这两种方法对其进行存取

        if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);
        }

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        // JS操作部分
        localStorage.JSa="JSA";
        document.write(localStorage.JSa);
        localStorage.setItem('JSb','&nbsp;JSB');
        document.write(localStorage.getItem('JSb'));
        // JQuery操作部分
        $(function(){
            window.localStorage.JQa="JQA";
            $("#a").text(window.localStorage.JQa);
            window.localStorage.setItem('JQb','JQB');
            $("#b").text(window.localStorage.getItem('JQb'));
        });
    </script>
</head>
<body>
    <p id="a"></p>
    <p id="b"></p>
</body>
</html>


具体的前端使用(实际的使用):

/**
*checkData:这个是缓存的数据
* departId:点击的组织机构id
* departName:点击的组织机构name
*/
function userSelect(checkData,departId,departName){
 
    var storage = getStorage();
    var checkKey = newGuid();
    storage.set(checkKey, checkData);
    //这个跳转到人员选择页面
    window.location.href = "mobile.do?        webcontent/index&page=user_select&checkKey="+checkKey+"&dId="+departId+"&departName="+departName;
 
}
 
/**
* 组织选择页面(人员选择页面(或已选人员页面)跳转到组织机构页面)
* checkData:这个是缓存的人员数据
*/
function orgSelect(checkData){
 
    var storage = getStorage();
    var checkKey = newGuid();
    storage.set(checkKey, checkData);
    //这个跳转到组织选择页面
    window.location.href = "mobile.do?webcontent/index&page=org_select&checkKey="+checkKey;
 
}
 
/**
* 已选人员页面(组织机构页面跳转到已选人员页面)
* checkData:这个是缓存的人员数据
*/
function checkUser(checkData){
 
    var storage = getStorage();
    var checkKey = newGuid();
    storage.set(checkKey, checkData);
    //这个跳转到已选人员页面
    window.location.href = "mobile.do?webcontent/index&page=checkUser&checkKey="+checkKey;
 
}
 
/**
* 缓存对象(在此js中是全局的)
*/
var storage = null;
function getStorage(){
    if(storage == null){
        storage = $.localStorage;
        if (!storage)
            storage = $.cookieStorage;
    }
    return storage;
}
 
/**
* 获取guid作为缓存的key值
*/
function newGuid() {
    var guid = "";
    for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";
    }
    return guid;
}
 
/**
* 从缓存获取数据,并删除数据
*/
function getAndRemoveStorageVal(key){
    var storage = getStorage();
    val = storage.get(key);
    storage.remove(key);
    return val;
}

3.localStorage的删除和修改

修改:

       if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            /*修改*/
            storage.a=4;
            console.log(storage.a);
        }

将localStorage的所有内容清除

            var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);

将localStorage中的某个键值对删除

            var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

4.localStorage其他注意事项

一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

示例:

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'bob',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:'bob',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

2人点赞
欢乐时光欢乐你我xushuai互联网电子商务 产品建设 及 技术研发
总资产118共写了2.6W字获得43个赞共18个粉丝


来自  https://www.jianshu.com/p/e8bb576c7724


普通分类: