首页 前端知识 【HTML5·本地存储】

【HTML5·本地存储】

2024-02-02 09:02:51 前端知识 前端哥 27 299 我要收藏

本地存储

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

localStorage 和 sessionStorage区别

  • localStorage 的生命周期是永久的,除非用户清除 localStorage 信息,否则这些信息将永远存在。
  • sessionStorage 的生命周期是临时的,一旦当前窗口或标签页被关闭了,那么通过它存储的数据也就被清空了。

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

localstorage 与 cookie 的区别

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>

使用 #paragraph p 可以获取到 id 名为 paragraph 的 div 元素中的子元素 p 标签

群组选择器

群组选择器是用于同时对几个选择器进行相同的样式设置。
在使用群组选择器时,两个选择器之间必须要用英文逗号隔开。

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

背景样式

background-color 属性可以给指定标签元素设置背景色。
background-image 属性可以把图像插入背景。
background-size 属性可以给背景图设置大小。
background-position 属性,可以改变图像在背景中的位置。
background-repeat 属性是用来设置背景图像是否平铺。
在这里插入图片描述

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

文本属性用于定义文本的样式,通过文本属性,可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。
在这里插入图片描述
line-height 用于设置多行元素的空间量,可取值具体说明如下:
normal:取决于用户端。
number:数字乘以元素的字体大小。
length:指定长度用于计算高度。
%:计算值是给定的百分比值乘以元素计算出的字体大小。

text-decoration 属性用于设置文本的装饰线,例如给文本加下划线、中划线、波浪线等。可取值具体说明如下:

text-decoration-line 设置线的位置,可取值包含:underline(下划线)、overline(上划线)、line-through(中划线)。
text-decoration-color 设置线的颜色。
text-decoration-style 设置线的样式,可取值包含:wavy(波浪线)、solid(实线)、dashed(虚线)。
text-decoration-thickness 设置线的粗细。

 <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>

字体属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1099.html
标签
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!