【HTML5·本地存储】_代码007(未授权)

本文介绍: 本地存储是指在客户端存储数据，HTML5 为我们提供了两种 API，分别是 localStorage 与 sessionStorage，二者作为 HTML5 新增的特性，它们的使用方法类似，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 对的数据。

本地存储是指在客户端存储数据，HTML5 为我们提供了两种 API，分别是 localStorage 与 sessionStorage，二者作为 HTML5 新增的特性，它们的使用方法类似，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 对的数据。

localStorage 对象提供的方法：
在这里插入图片描述

localStorage 解决了早期使用 cookie 存储遇到的存储空间不足的问题( 每条 cookie 的存储空间为 4k )；
localStorage 一般浏览器支持的是 5M 大小，具体存储大小根据浏览器的不同会有所不同。
并且相较于 cookie 而言，localStorage 中的信息不会被传输到服务器。
localStorage ：

   // 语句 1： 保存数据到本地存储
      localStorage.setItem("ExpireTime", "1527592757");
      localStorage.UserId = "2021008";
      // 语句 2： 根据指定名称获取本地存储中的数据
      var expireTime = localStorage.getItem("ExpireTime");
      console.log(expireTime);
      // // 语句 3： 根据指定名称从本地存储中移除
      localStorage.removeItem("ExpireTime");
      // // 语句 4： 清除本地存储中所有数据
      localStorage.clear();

在此处查看：
在这里插入图片描述
sessionStorage

     // 语句 1： 保存数据到本地存储
      sessionStorage.setItem("ShopId", "SH1290333211");
      sessionStorage.ShopNumber = "10";
      // 语句 2： 根据指定名称获取本地存储中的数据
      var ShopId = sessionStorage.getItem("ShopId");
      console.log(ShopId);
      // 语句 3： 根据指定名称从本地存储中移除
      sessionStorage.removeItem("ShopId");
      // 语句 4： 清除本地存储中所有数据
      sessionStorage.clear();

在此处查看：在这里插入图片描述
id 选择器的 id 在 HTML 文档中是唯一的。

id 选择器 > 类选择器 > 标签选择器。
当你在样式声明中加入 !important 规则时，它会改变样式声明的优先级。

  p {
        color: rgb(123, 52, 133) !important;
      }

  <style>
      #paragraph p {
        color: lightskyblue;
      }
    </style>
  </head>
  <body>
    <div id="paragraph">
      <p>这是一个段落</p>
    </div>
  </body>

   <style>
      div,
      span {
        color: lightskyblue;
      }
    </style>

  <style>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
        background-repeat: no-repeat;
         background-position: center;
      }
    </style>

 <style>
      .item1 {
        text-decoration: underline lime; /*下划线直线*/
      }
      .item2 {
        text-decoration: wavy overline lime; /*上划线波浪线*/
      }
      .item3 {
        text-decoration: line-through lime; /*中划线*/
      }
      .item4 {
        text-decoration: none; /*无样式*/
      }
      .item5 {
        text-decoration: dashed underline overline lime 5px; /*圆点上划线和下划线*/
      }
    </style>