本地存储的三种方式

1、cookle：

作用

cookie是纯文本，没有可执行代码。存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）

特征

• 不同的浏览器存放的cookie位置不一样，也是不能通用的。
• cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。
• 我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域
• 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
• 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
• cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁

修改 cookie

要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值，而是添加了一个新的 cookie

删除

把要删除的cookie的过期时间设置成已过去的时间,path/domain/这几个选项一定要旧cookie 保持一样。

注意

如果只设置一个值，那么算cookie中的value; 设置的两个cookie,key值如果设置的相同，下面的也会把上面的覆盖

cookle:

        一、使用场景

        1、记住密码，下次自动登录

        2、记录用户浏览数据,进行商品(广告)推荐

        二 特点:

        1、cookie保存在浏览器端

        2、单个cookle保存的数据不能超过4kb

        3、cookie中的数据是以域名的形式进行区分的

        4、cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除

        5、cookie中的数据会随着请求被自动发送到服务器端

        三、

        由于cookie存储机制有很多缺点，HTML5不再使用它,转而使用改良后的WebStorage存储机制。(localStorage和sessionStorage)

2、localstorage：

特点

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• 存储的信息在同一域中是共享的。
• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
• 大小：据说是5M（跟浏览器厂商有关系）
• 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
• localStorage受同源策略的限制

设置

localStorage.setItem('username','cfangxu');

获取

localStorage.getItem('username')
也可以获取键名
localStorage.key(0) #获取第一个键名

删除

localStorage.removeItem('username')
也可以一次性清除所有存储
localStorage.clear()

storage事件

当storage发生改变的时候触发

<script>
        // 1.什么是localstorage
        // 在HTML5中,新加入了一个localstorage特性,这个特性主要用来作为本地存储来使用。 
        // 它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localstorage一般为5M。

        // 2.localStorage的生命周期
        // LocalStorage生命周期是永久，这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,
        // 否则这些信息将永久存在。 

        // 3.localstorage的局限
        // a.在IE8以上的IE版本才支持localstorage这个属性。
        // b.目前所有的浏览器中都会被localStorage的值类型限定为string类型，
        //   对我们日常比较常见的JSON对象类型需要一个转换。

        // 4.判断浏览器是否支持localstorage这个属性 
        if(window.localstorage){
           alert('浏览器支持localStorage')
        }

        // 5.localstorage的写入
        if(!window.localStorage){
            alert('浏览器不支持localstorage')
        }else{
            var storage = window.localStorage;
            // 写入a字段
            storage['a'] = 1;
            // 写入b字段 
            storage.b =2;
            // 写入c字段
            storage.setItem('c',3)

            console.log(typeof storage['a']); //string 
            console.log(typeof storage['b']); //string 
            console.log(typeof storage['c']); //string
        }
    </script>

sessionStorage:

其实跟localStorage差不多，也是本地存储，会话本地存储

特点：

• 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的