存储方式cookie、localStorage、sessionStorage

一、cookie存储方式

1：使用场景
（1）：记住密码,下次自动登录。
（2）：记录用户浏览数据,进行商品(广告)推荐。

2：特点：
（1）：cookie保存在浏览器端
（2）：单个cookie保存的数据不能超过4KB。
（3）：cookie中的数据是以域名的形式进行区分的。
（4）：cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。
（5）：cookie中的数据会随着请求被自动发送到服务器端。

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

二、localStorage存储方式

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

三、sessionStorage存储方式

SessionStorage的生命周期
SessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了
那么所有通过Session存储的数据也就被清空了。

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了存储方式cookie、localStorage、sessionStorage。