HTML5本地储存方案

最新推荐文章于 2021-10-29 18:05:11 发布

weixin_41387874

最新推荐文章于 2021-10-29 18:05:11 发布

阅读量61

点赞数

分类专栏： HTML 笔记文章标签： html5

本文链接：https://blog.csdn.net/weixin_41387874/article/details/120085079

版权

笔记同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

本地存储

HTML 4.01中的本地存储方案

在HTML 4.01中，本地存储一般只能使用cookie实现，但是cookie有很多限制。

cookie的3个限制
- 大小限制
  - 大多数浏览器只支持最大为4KB的cookie。
- 数量限制
  - 大多数浏览器只允许每个站点储存20个cookie。
- cookie在默认情况下，都会随着HTTP请求发送到后台，但实际上大多数请求用不到。

HTML 5的3中本地存储方案

localStorage（window对象的子对象）

用于永久保存客户端的少量数据。
- 即使浏览器关闭了，localStorage中储存的数据也不会被清除。
  - 每个域名，浏览器允许储存5MB的localStorage。
    - localStorage的5个常用方法
      - setItem(key,value)
        
        保存数据
      - getItem(key)
        
        获取数据
      - removeItem(key)
        
        删除某个数据
      - clear()
        
        清空所有数据
      - key(n)
        
        获取localStorage中的第n个键值对的键。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <!-- <meta http-equiv = "refresh" content = "6;url = https://www.baidu.com"/> -->
        <link type = "text/css" rel = "stylesheet" href = "a.css"/>
        <style type = "text/csss"></style>
    </head>
    <body>
        <label>账号：</label><input id = "account" type = "text"/>
        <label>密码：</label><input id = "password" type = "password"/>
        <input id = "btn" type = "button" value = "submit"/>
        <input id = "reset" type = "reset" value = "reset"/>
        <p id = "accountP">null</p>
        <p id = "passwordP">null</p>
    </body>
    <script type = "text/javascript">
        let account = document.getElementById('account');
        let password = document.getElementById('password');
        let p1 = document.getElementById('accountP');
        let p2 = document.getElementById('passwordP');
        let button = document.getElementById('btn');
        let reset = document.getElementById('reset');
        reset.onclick = function()
        {
            localStorage.clear();
            p1.innerHTML = "null";
            p2.innerHTML = "null";
        }

        p1.innerHTML = "账号：" + localStorage.getItem("account");
        p2.innerHTML = "密码：" + localStorage.getItem("password");

        button.onclick = function()
        {
            localStorage.setItem("account",account.value);
            localStorage.setItem("password",password.value);
            account.value = "";
            password.value = "";
            p1.innerHTML = localStorage.getItem("account");
            p2.innerHTML = localStorage.getItem("password");
        }

    </script>
</html>

sessionStorage（window对象的子对象）

用于临时保存客户端的少量数据。
- 当浏览器关闭，那么sessionStorage中的数据就会丢失。

indexedDB

用于永久保存客户端的大量数据。
- indexDB是一个对象数据库。
  - 创建数据库
    - HTML 5支持使用indexedDB的open方法来打开或创建一个数据库。
      - 一个例子是，let request = window.indexedDB.open(数据库名，版本号);
        
        版本号是随意取的。
        window.indexedDB.open()返回一个请求对象。
  - 删除数据库
    - 使用deleteDatabase()方法删除数据库。
      - deleteDatabase()接收1个参数，这个参数是数据库名。
      - deleteDatabase()会返回一个请求对象。
        
        这个对象有2个事件
        
        onerror
        
        表示请求失败所触发的事件。
        
        onsuccess
        
        表示请求成功所触发的事件。

XMind: ZEN - Trial Version

weixin_41387874

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5本地储存方案

本地存储HTML 4.01中的本地存储方案在HTML 4.01中，本地存储一般只能使用cookie实现，但是cookie有很多限制。cookie的3个限制大小限制大多数浏览器只支持最大为4KB的cookie。数量限制大多数浏览器只允许每个站点储存20个cookie。cookie在默认情况下，都会随着HTTP请求发送到后台，但实际上大多数请求用不到。HTML 5的3中本地存储方案localStorage（window对象的子对象）用于永久保存客户端的少
复制链接

扫一扫

专栏目录