前端本地存储方式

参考：https://www.cnblogs.com/Ruth92/p/6384057.html?utm_source=itdadao&utm_medium=referral

1、Web Storage：仅存储于客户端

html5中的Web Storage包括两种存储方式：sessionStorage和localStorage

Storage；类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串

Storage的实例方法有：

     setItem(name,value)：为指定的name设置一个对应的值

     getItem(name)：根据指定的name获取对应的值

     key(index)：获取index处的值

     clear：删除所有值，Firefox中没有实现

     removeItem(name)：删除由name指定的名的值

（1）sessionStorage

        用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此，sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

例：

        //使用方法设置存储数据
        sessionStorage.setItem('name','life');
        //使用属性存储数据
        sessionStorage.age=100;
        //使用方法获取数据
        sessionStorage.getItem('name');
        //使用属性获取数据
        sessionStorage.age;
        //通过结合length属性和key()方法来迭代sessionStorage中的值
        for(var i=0,len=sessionStorage.length;i

 

（3）storage事件

对storage对象进行任何操作，都会在文档上触发storage事件，该事件的event对象有以下属性：

domain：发生变化的存储空间的域名

key：设置或者删除的键名

newValue：如果是设置值，则是新值；如果是删除键，则是null

oldValue：键被更改之前的值

 

2、cookie存储

注：chrome、360浏览器不支持本地调试cookie，firefox可以

cookie虽然为持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性。

（1）优点：极高的扩展性和可用性

      1）可控制cookie的生命期，使之不会永久·有效。偷盗者可能拿到一个过期的cookie

      2）通过加密和安全传输技术SSL，减少cookie被破解的可能性

      3）只在cookie中存放不敏感数据，即使被盗也不会有重大损失

      4）兼容性好

（2）缺点

      1）cookie数量和长度有限。每个特定的域名(domain)最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

      2）安全性差。如果cookie被人拦截，就可以取得所有的session信息。

      3）有些状态不可能保存在客户端