js存储方式

一、本地存储

随着.互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据, HTML 5规范提出了相关解决方案。

本地存储特性

1、数据存储在用户浏览器中。

2、设置、读取方便、甚至页面刷新不失数据。

3、容量较大, sessionStorage约5M、localStorage约20M。

4、只能存储字符串,可以将对象JSON.stringify0编码后存储。
 

一.cookie

   一：使用场景

    1.记住密码，下次自动登入。

    2.记录用户浏览器数据，进行商品（广告）推荐。

    二：特点：

    1.cookie保存在浏览器端

    2.单个cookie保存的数据不能超过4kb。

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

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

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

    三:

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

    (localStorage和sessionStorage)

二.window.sessionStorage

    1.SessionStorage是生命周期

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

    3.以键值对的形式存储使用。

存储数据:

sessionStorage.setltem(key,value)

获取数据:

sessionStorage.getltem(key)

删除数据:

sessionStorage.removeltem(key)

删除所有数据:

sessionStorage.clear()

三、window.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
        }

获取数据

console.log(storage.getItem('c')); // 3

删除数据

 storage.removeItem('c');

console.log(storage.getItem('c')); //null

删除所有数据

storage.clear();