本地存储

目录

1.本地存储
2.ejs模板引擎
3.iscroll
4.webapp之使用less构建响应式布局
5.webapp之数据绑定和本地存储
6.webapp之实现比赛集锦区

1.本地存储

在客户端运行的js是不能操作用户电脑磁盘中的文件的，为了保护客户端的安全。
js中的本地存储：使用js向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息也不会销毁，当重新打开浏览器时，依然可以获取到上一次存储的信息

本地存储的方法

传统方法：

cookie：把信息存储到客户端的浏览器中，但是项目中的服务器也是可以获取cookie的
session：把信息存储到服务器上，服务器存储

HTML5中的方法：webStorage

localStorage：永久存储到客户端的本地
sessionStorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失了

localStorage、sessionStorage

localStorage.setItem([key],[value])：向客户端的本地存储一条记录，存储的[value]只能是字符串类型，如果编写的不是字符串，浏览器也会默认的转化为字符串，然后再进行存储。同源下存储的[key]不能重复，如果之前有的话，是把存储的信息进行修改
存储：localStorage.setItem("age",7);
localStorage.setItem("age", json.stringify({"abc": "123"})); 存储对象

localStorage.getItem([key])：获取之前存储的值
获取：localStorage.getItem("age");

localStorage.removeItem([key])：移除key对应的存储记录

localStorage.clear()：把当前源下所有的存储记录都移除掉

localStorage.length：获取当前存储的多少条

localStorage.key(0)：获取索引为i的这一项的key值

sessionStorage使用方法同上

localStorage和sessionStorage的区别

localStorage属于永久存储到本地，不管是刷新页面还是该关闭浏览器，存储的内容都不会消失，只有手动的删除才会消失。不管是杀毒软件还是浏览器自带的清除历史记录功能都不能把localStorage存储的内容移除掉
sessionStorage是临时会话存储，只要当前的页面不关闭，信息就可以存储下来，但是页面一旦关闭，存储的信息就会自动删除。F5刷新页面只是把当前的DOM结构等进行重新的渲染，会话并没有关闭。

cookie

存储：document.cookie = "age=7";
获取：document.cookie;

var cookieRender = (function () {
    //设置：
    function setValue(options) {
        var _default = {
            name: null,
            value: null,
            expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24)),
            path: "/",
            domain: ""
        };
        for (var key in options) {
            if (options.hasOwnProperty(key)) {
                _default[key] = options[key];
            }
        }
        document.cookie = _default.name + "=" + escape(_default.value) + ";expires=" + _default.expires.toGMTString() + ";path=" + _default.path + ";domain=" + _default.domain;
    }

    //获取：
    function getValue(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) {
            return unescape(arr[2]);
        }
        return null;
    }

    //删除：
    function removeValue(options) {
        var _default = {
            name: null,
            path: "/",
            domain: ""
        };
        for (var key in options) {
            if (options.hasOwnProperty(key)) {
                _default[key] = options[key];
            }
        }
        if (getValue(_default.name)) {
            document.cookie = _default.name + "=" + "; path=" + _default.path + "; domain=" + _default.domain + ";expires=Fri, 02-Jan-1970 00:00:00 GMT";
        }
    }

    return {
        set: setValue,
        get: getValue,
        remove: removeValue
    }
})();

使用上述代码进行cookie的存储与获取：

<script type="text/javascript" src="js/cookie.js" charset="UTF-8">script>
<script type="text/javascript">
    cookieRender.set({
        name: "age",
        value: 7
    });
    console.log(cookieRender.get("age")); //7
script>

补充：escape和unescape

可以对中文的字符串进行编码和解码，防止传输过程中出现乱码
例如：

var str = "你好";
var n = escape(str);
var m = unescape(n);
console.log(n, m); //%u4F60%u597D 你好

除此之外还有很多：
encodeURI() 和 decodeURI()
encodeURIComponent() 和 decodeURIComponent()

cookie和localStorage的区别

cookie兼容所有浏览器，但是localStorage不兼容IE6-8
cookie存储内容的大小是有限制的，一般同源下只能存储4KB的内容
localStorage存储内容的大小也有限制的，一般同源下能存储5MB的内容
cookie存储内容是有过期时间的，而localStorage是永久存储到本地的，使用杀毒软件或浏览器清除垃圾的功能都可能会把cookie清除掉
用户可能出于安全的角度禁用cookie（无痕浏览），但是不能禁止localStorage

真实项目中的本地存储都使用哪些东西：

• cookie： 记住用户名密码或是自动登录、用户的部分信息：当用户登录成功后，会把用户的一些信息记录到本地cookie中，这样在项目中的任何页面都可以知道当前用户的用户信息是哪一个了、购物车……（存储少量信息或者需要）
• localStorage：某一个js或css原代码（性能优化，减少请求）、一些不需要经常更新的数据存储到本地，存储的时候可以设置一个存储的时间，以后重新刷新页面，看下时间有没有超过预定的时间，如果已经超过了，就重新获取最新的数据，没超过就使用本地数据

本地存储都是明文存储，对于重要信息一般不要存储到本地，如果非要存储的话，需要把存储的信息进行加密。
可逆转加密：加密完成还可以解密
不可逆转加密：MD5

<script type="text/javascript" src="js/md5.js" charset="UTF-8">script>
<script type="text/javascript">
    var name = "5211314";
    console.log(hex_md5(name)); //abc48663eb03f6c72908fd84a4d9b9e0
script>

2.ejs模板引擎