JS-本地存储

数据可以储存的两个地方分别是：

                 1.服务器

                  2.本地

                       缺点：1.不会对服务器造成负担，但会占用本地内存。

                                   2.信息不安全，容易造成泄漏。

本地储存有三种分别是：

                           1.cookie

                           2.localStorage  h5新增

                           3. sessionStorage h5新增

以下是这三种储存方法在也不同场景的使用情况；

     版本的兼容性

       cookie（兼容）

      localStorage （IE8以下的版本不兼容）

      sessionStorage （IE8以下的版本不兼容）

   容量

       cookie（4kb）

      localStorage （5m）【不同的浏览器可能会有不同的大小】

      sessionStorage （5m）

 时效性

      cookie（永久保存  只要不手动删，永远保留。）

      localStorage （一次会话结束，浏览器关闭，就会消失。）

      sessionStorage （需要设置有效期，有效期到了会自动消息。不设置默认是session级别。）

同源性

同协议：【列如：“http, https, flie”】

同域名：【列如：ID‘127.0.0.1’     “baidu.com”】

同端口：【80】

       满足同源性的页面，它们会共用同一个：  localStorage，     sessionStorage，       cookie 。

 

localStorage是window对象下面的一个属性，本身也是一个对象。

本地存储数据只能存字符串 。如果存储的不是一个字符串，它会先自动转为字符串。如果是对象，会变成[object Object]。

    取数据

   删除数据

   清空数据

例子！！

console.log(window.localStorage);
    if (window.localStorage) {
      // 写localStorage的相关代码
    } else {
      alert("该浏览器不支持localStorage！")
    }



   //输出结果
    Storage {length: 0}
    length: 0__proto__: Storage

  键值对 一个键对应一个值。 

          存数据的三个写法：

例子！！！

 //案例！

localStorage["name"] = "张三";
    localStorage.age = 18;
    localStorage.setItem("sex","女");
    localStorage.father = {name:"王五"}


//用取数据的方法拿到的结果。
    console.log(localStorage.father);
    console.log(localStorage["name"]);
    console.log(localStorage.getItem("sex"));

    输出结果！！！
[object Object]
06localStorage.html:36 张三
06localStorage.html:37 女



// 修改数据：存数据一样的写法，如果存入的键已经存在了，就是修改它的值。

    localStorage.setItem("age",28);
    console.log(localStorage.getItem("age"));   //结果为：28

// 删除数据
localStorage.removeItem("father");

 // 清空数据  （慎用）

 localStorage.clear();

   sessionStorage 也是window对象下面的一个子对象。

例子!!

<script>
    if (window.sessionStorage) {
      // 存
      sessionStorage.setItem("name","法外狂徒");
      sessionStorage["age"] = 20;
    } else {
      alert("该浏览器不支持sessionStorage！")
    }
  </script>

     输出结果！！！

       cookie  存储本地数据

   键值对的形式【cookie只能在域名环境下才可以使用】

   获取：document.cookie

           

存数据：

      document.cookie = "键=值"

      【注意】一次只能存一条

    取数据：

      document.cookie

      【注意】获取cookie中所有的内容，多条记录之间用；分隔。

改数据：

      和存数据一样的写法，如果之前没有这个键，就是存，有就是修改。

    

    删数据：

      没有删除的删除，只能设置过期时间。

      如果要删除一条数据，只需要将它的过期时间设置为现在之前就可以了。

 

    有效期设置：

      document.cookie = "键=值;expires="+日期;

  

      服务器默认时间：格林威治时间。 咱们是东8区。  现在是下午3点21分。 对应的格林威治：7点21分。

    案例！！！

 <script>
    document.cookie = "name='张三'";
    document.cookie = "age=18";
    console.log(document.cookie);
    document.cookie = "sex='男';expires="+new Date("2021-05-19 07:24:00");
  </script>

    页面输出结果！！

 

本地存储的结果！！！