步入restful之前先了解一下localStorage

原创
2017/12/07 21:23
阅读数 125

为什么要记录这篇文章呢?

    最近为一个朋友写一个简单的后台管理系统,打算使用RESTFUL风格的web service,练练手,为找工作做铺垫.RESTFUL的原则是后台只返回数据,前端使用MVVM模式或者其它类型前端框架将数据和视图展现给用户.

    这样一来,后台会轻松很多,也会规范很多.使用springmvc和一些json工具包就能实现很多简单的功能.开发也很便捷.

    在MVVM模式的前端中,不像以前的前端,由后台跳转到登陆后的页面.MVVM模式中的页面跳转由前端M-V双向数据监听器完成.后台只负责给数据即可.

    那么在这个过程中,视图半脱离了服务器.像登录和自动登录这些内容怎么实现呢?

    session:session是存储在service端的用户临时数据.在RESTFUL的webapp中,session变得生搬硬套.

    cookie:可以作为一种手段,(虽然空间比较小,但是小应用不会遇到空间大小问题.)

    localStorage:h5的新特性,大小存储增到5M,以K-V模式存储.相对浏览器来说是安全的(但是对于文件来说并不见得就是安全的.)

    localStorage是前端的一个小型数据库,非常方便,可以缓存很多前端需要用到的数据.

    但是其缺点也是显而易见的:

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

 

下面是一些localStorage的实践:

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

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

localStorage的写入(3种方式):

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中的value都会被转为string类型.

localStorage修改数据

storage.a=4;

清除所有内容

storage.clear();

删除某个键值对(a是key)

storage.removeItem("a");

获取key(i为索引):

var key=storage.key(i);

另外值得注意的是:

如果要将JSON Object存入localStorage,需要先调用JSON.stringify()转换为string.

将其取出时要转换为object,调用JSON.parse();

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部