H5C3进阶——Web存储_前端h5c3本地存储

作者：神奇cpp | 2024-07-20 12:54:19

踩

前端h5c3本地存储

文章目录

web存储

seesionStorage(临时存储在内存中)

F12–>Application

<body>
    sessionStorage的使用：存储数据到本地。存储容量5MB左右<br>
        1.这个数据本质是存储在当前页面的内存中<br>
        2.它的生命周期为关闭当前页面，页面关闭，数据会自动清除<br>
        <br>
    setItem(key,value):存储数据，以键值对的方式存储<br>
    getItem(key):获取数据，通过指定名称的额key获取对应的value值<br>
    removeItem(key):删除数据，通过指定名称key删除对应的值<br>
    clear():清空所有存储的内容<br>

    <br>

    <input type="text" id="userName">
    <input type="button" value="设置数据" id="setData">
    <input type="button" value="获取数据" id="getData">
    <input type="button" value="删除数据" id="removeData">
    <script>
        //存储数据
        document.querySelector("#setData").onclick = function(){
            //获取用户名
            var name = document.querySelector("#userName").value;
            //存储数据
            window.sessionStorage.setItem("userName",name);
        }
        //获取数据
        document.querySelector("#getData").onclick = function(){
            //如果找不到对应的key，获取null
            var name = window.sessionStorage.getItem("userName");
            alert(name);
        }

        //删除数据
        document.querySelector("#removeData").onclick = function(){
            //在删除时如果key值错误，不会报错，但是也不会删除数据
            window.sessionStorage.removeItem("userName1");
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

localStorage(永久存储在硬盘上)

    localStorage的使用：<br>
        1.存储的内容大概20MB<br>
        2.不同浏览器不能共享数据，但是同一浏览器不同窗口可以共享数据<br>
        3.永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除,若想清除，必须手动清除<br>

        <br>
    setItem(key,value):存储数据，以键值对的方式存储<br>
    getItem(key):获取数据，通过指定名称的额key获取对应的value值<br>
    removeItem(key):删除数据，通过指定名称key删除对应的值<br>
    clear():清空所有存储的内容<br>

    <br>

    <input type="text" id="userName">
    <input type="button" value="设置数据" id="setData">
    <input type="button" value="获取数据" id="getData">
    <input type="button" value="删除数据" id="removeData">
    <script>
        //存储数据
        document.querySelector("#setData").onclick = function(){
            var name = document.querySelector("#userName").value;
            //使用localStorage存储数据
            window.localStorage.setItem("userName",name);
        }
        //获取数据
        document.querySelector("#getData").onclick = function(){
            //如果找不到对应的key，获取null
            var name = window.localStorage.getItem("userName");
            
            alert(name);
        }

        //删除数据
        document.querySelector("#removeData").onclick = function(){
            //在删除时如果key值错误，不会报错，但是也不会删除数据
            window.localStorage.removeItem("userName");
        }
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

应用缓存

概念：使用HTML5，通过创建 cacahe manifest 文件，可以轻松的创建web应用的离线版本
优势：
- 可配置需要缓存的资源
- 网络无连接应用仍可用
- 本地读取缓存资源，提升访问速度，增强用户体验
- 减少请求，缓解服务器负担
Cache Manifest 基础：
- 如需启用应用程序缓存，请在文档的标签中包含manifest属性∶
```
<html lang="en" manifest="demo.appcache">
1
```
- 每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest 属性，则页面不会被缓存（除非在manifest 文件中直接指定了该页面)。
- 注意，manifest 文件需要配置正确的MIME-type，即"text/cache-manifest"。必须在web服务器上进行配置
Manifest文件：
- 概念：manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)
- manifest文件可分为三个部分
  - CACHE MANIFEST - 开始
  - CACHE在此标题下列出的文件将在首次下载后进行缓存
  - NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  - FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(例如404页面)
- CACHE MANIFEST说明：
  - CACHE MANIFEST，

demo.appcache

CACHE MANIFEST
#上一句代码必须是当前文档的第一句
#后面写注释

#需要缓存的文件清单列表
../html/images/11111.jpg
../html/images/22222.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../html/images/33333.jpg

#配置如果文件无法获取，则使用指定文件进行替代
FALLBACK:
/ ../html/images/narutohinata.jpg
# /代表所有文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用缓存</title>
    <style>
        img {
            width: 300px;
            display: block;
        }
    </style>
</head>
<body>
    <img src="../html/images/11111.jpg" alt="">
    <img src="../html/images/22222.jpg" alt="">
    <img src="../html/images/33333.jpg" alt="">
    <img src="../html/images/cgs1.jpg" alt="">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】