localStorage介绍和使用

PHPer 2018-01-20 1869 0 1

一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(co...

一、什么是localStorage、sessionStorage

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

二、localStorage的优势与局限

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限...

立即注册

更新于:2018-02-13 13:07:33
    您需要登录后才可以评论。 立即注册

    localStorage的使用

    三、localStorage的使用localStorage的浏览器支持情况:这里要特别声明一下,如果是使用IE浏览器的话,那么就要UserData来作为存储,这里主要讲解的是localStorage的内...

    三、localStorage的使用

    localStorage的浏览器支持情况:

    这里要特别声明一下,如果是使用IE浏览器的话,那么就要UserData来作为存储,这里主要讲解的是localStorage的内容,所以userData不做过多的解释,而且以博主个人的看法,也是没有必要去学习UserData的使用来的,因为目前的IE6/IE7属于淘汰的位置上,而且在如今的很多页面开发都会涉及到HTML5\CSS3等新兴的技术,所以在使用上面一般我们不会去对其进行兼容

    首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性

    if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }else{
                //主逻辑业务
            }

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

    if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }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"]);
            }

    运行后的结果如下:

    这里要特别说明一下localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage

    最后在控制台上面打印出来的结果是:

    不知道各位读者有没有注意到,刚刚存储进去的是int类型,但是打印出来却是string类型,这个与localStorage本身的特点有关,localStorage只支持string类型的存储。

    localStorage的读取

    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);
            }

    这里面是三种对localStorage的读取,其中官方推荐的是getItem\setItem这两种方法对其进行存取,不要问我这个为什么,因为这个我也不知道...

    立即注册
    更新于:2018-01-20 20:49:14

    localStorage其他注意事项

    四、localStorage其他注意事项 一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式这个时候我们可以使用JSON.stringify()这...

    四、localStorage其他注意事项

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

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

    示例:

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

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

    立即注册
    更新于:2018-01-20 23:40:20
    相关内容

    说说国产电影

    大陆电影《霸王别姬》到底如何?

    周星驰的喜剧之王

    真正的难忘,再说周星驰,《大话西游》两部曲

    不得不提的《英雄本色》,一帮演员和剧组太给力了,当然导演厉害了!

    2010年后的国产电影,看来除了《让子弹飞》其他都可以带过了?

    《芳华》这样露大腿合适吗?

    《国士无双》还是那么好看

    算是知道花木兰那么多成本都花在哪了

    评论《八佰》-为了照顾部分同学的逻辑思维能力,俺们通俗一把

    【豆瓣评论】评《中国合伙人》

    贺岁片 东成西就(1993)(国语) 精彩片段

    域名解析

    打不开Godaddy.com网站和域名无法解析的解决方法

    GoDaddy DNS问题导致域名解析不正常的解决办法

    godaddy 无法登录 Your browser is a bit unusual... Please try the foll...

    推荐内容

    分享几个好用的bt搜索bt资源下载网址网站

    影视电影剧集动漫综艺bt资源在线播放网址网站推荐分享

    全网最新bt磁力搜索引擎bt资源bt网站网址分享

    人气美女女优百度指数排行榜(波多野结衣,苍井空,三上悠亚,深田咏美,桥本有菜,北条...

    最强人造人深田咏美,业界的社交女王

    人生起起落落的三上悠亚,成名前的清纯风,怎么搭配出来的?

    业内第一大长腿,桥本有菜的腿究竟有多长

    波多野结衣,岛国业界著作最多的超级劳模

    日本AV界NO.1,苍井空是多少宅男的疯狂?

    美女女优视频混剪 This Girl-Laza Morgan

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩...

    sstap游戏代理教程 从此玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩虹六...

    影视电影剧集动漫综艺bt资源在线播放网址网站推荐分享