HTML5网页存储

顺晟科技

2022-09-15 20:10:27

157

HTML5 WEB 存储

WEB 存储系统

　　- 互联网最初的设想是作为信息展示的一种方式，信息处理是后来才逐渐出现的。

　　- 但是 WEB 的本质没有改变，数据依然是在服务器上完成的，在客户端显示。

　　- 对任何程序来讲，实现数据存储是必备的功能之一，并且在需要的视乎提供数据。

　　- Cookie 曾经是用来存储少量的信息，但是受限于性质，智能存储简短的字符串。

　　* 在 HTML5 中提供了 WEB 存储的 API ，允许在硬盘上存储数据（持久化）。

　　* API 可以分为两部分：

　　　　- 信息必须且只在会话过程中使用 - sessionStorage

　　　　- 信息长期保存且有用户决定时长 - localStorage

sessionSrorage

　　sessionStorage API 像是 cookie 的替代，会在会话期间保持数据可用。

　　cookie 使用浏览器作为引用，而 sessionStorage 使用单个窗口作为引用。

　　这就意味着，窗口关闭后，sessionStorage 就不能再是用了。

创建数据

　　sessionStorage 和 localStorage 都将数据存储为项，采用键值对的格式。

语法

　　- setItem(key,value)：用键值对创建项目，主键存在则更新值。

　　- getItem(key)：根据主键获取对应的值。

　　- sessionStorage.setItem(\'uname\',\'wjw\');

　　- var uname = sessionStorage.getItem(\'uname\');

案例代码

<input type="text" id="uname" name="" value="" required>
<button type="button" onclick="saveuname()" name="button">save</button>

<script type="text/javascript">
  function saveuname() {
    var uname = document.getElementById("uname").value;
    sessionStorage.setItem("uname",uname);
  }
</script>

读取数据

　　API 提供了更多的方法和属性操纵项，使代码变得有用。

属性

　　- length：返回应用程序在储存空间中积累的项的数量。

方法

　　- key(index)：获取指定索引对应的项的主键。

案例

　　- var len = sessionStorage.length;

　　- for(var i=0;i<len;i++){

　　　　- var key = sessionStorage.key(i);

　　　　- console.log(sessionStorage.getItem(key));

　　- }

案例代码

<p>
<h2 id="msg"></h2>
</p>
<p>
  <input type="text" id="key" required>
  <input type="text" id="value" required><br>
  <button type="button" onclick="save()" name="button">save</button>
  <button type="button" onclick="read()" name="button">read</button>
</p>
<script type="text/javascript">
  function save() {
    var key = document.getElementById("key").value;
    var value = document.getElementById("value").value;
    sessionStorage.setItem(key,value);
  }

  function read() {
    var key =document.getElementById("key").value;
    var msg= document.getElementById("msg");
    msg.innerHTML = sessionStorage.getItem(key);
  }
</script>

删除数据

API 提供了两种方式删除项。

　　- removeItem(key)：根据主键删除指定项。

　　- clear()：清空整个存储空间，删除所有项。

　　- sessionStorage.removeItem(\'uname\');

　　- sessionStorage.clear();

　　- console.log(sessionStorage.length);

案例代码

<div>
<h2 id="msg"></h2>
</div>
<p>
  <input type="text" id="key" required>
  <input type="text" id="value" required><br>
  <button type="button" onclick="saveStorage()" name="button">save</button>
  <button type="button" onclick="readStorage()" name="button">read</button>
  <button type="button" onclick="removeStorage()" name="button">remove</button>
  <button type="button" onclick="clearStorage()" name="button">clear</button>
</p>
<script type="text/javascript">

  function saveStorage() {
    var key = document.getElementById("key").value;
    var value = document.getElementById("value").value;
    sessionStorage.setItem(key,value);
  }

  function readStorage() {
    var key =document.getElementById("key").value;
    var msg= document.getElementById("msg");
    msg.innerHTML = sessionStorage.getItem(key);
  }

  function removeStorage() {
    var key =document.getElementById("key").value;
    sessionStorage.removeItem(key);
  }

  function clearStorage() {
    sessionStorage.clear();
  }

</script>

练习

　　- 创建登录界面，使用 sessionStorage 存储用户名。

　　 - 在其他界面读取用户信息

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1">
    <title>login</title>
    <style>
        .form-container {
            border: 1px solid #999999;
            margin: 0 auto;
            width: 50%;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="form-container">
    <form action="welcome.html" onsubmit="return check()">
        <h2>用户登录</h2>
        <p>
            <label for="username">姓名</label>
            <input type="text" id="username" required>
        </p>
        <p>
            <label for="password">密码</label>
            <input type="password" id="password" required>
        </p>
        <p>
            <button type="submit">登录</button>
            <button type="reset">重置</button>
        </p>
    </form>
    <script>
        function check() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            if(!sessionStorage.getItem(username)){
                sessionStorage.setItem(username, password);
                alert("注册成功！");
                return false;
            }

            if(sessionStorage.getItem(username)===password){
                alert("登录成功！");
                sessionStorage.setItem("currentuser",username);
                return true;
            }else{
                alert("登录失败！");
                return false;
            }
        }
    </script>
</div>

</body>
</html>

welcome.html 文件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1">
    <title>welcome</title>
</head>
<body>
    <h2 id="username"></h2>
    <script>
        var username = document.getElementById("username");
        username.innerHTML = "欢迎你，" + sessionStorage.getItem("currentuser");
    </script>
</body>
</html>

localStorage

　　在窗口会话期间临时存储数据，某些情况下可用，但是如果想摸你桌面应用，临时的数据存储系统就不够用了。

　　为了解决这个问题，API 提供了另一个系统，为每个来源保留了一个存储空间，并保存信息持久可用 - localStorage。

　　利用 localStorage，可以保存大量数据，并有用户决定信息是否保留。

　　localStorage 和 sessionStorage 拥有相同的接口，方法属性一致。

　　- localStorage 拓展了 cookie 的 4K 限制。

　　- localStorage 会可以将第一次请求的数据直接存储到本地，这相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只要在高版本浏览器中才支持的。

localStorage 的局限性

　　浏览器的大小不统一，并且在 IE8 以上版本才支持 localStorage 这个属性。

　　目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们目前比较常见的 JSON 对象类型需要一些转换。

　　localStorage 在浏览器的隐私模式下面是不可读取的。

　　localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

　　localStorage 不能被爬虫抓取到。

localStorage 的浏览器支持判断

　　if(!window.localStorage){

　　　　console.log("浏览器不支持localStorage");

　　}else{

　　　　console.log("浏览器支持localStorage");

　　}

<script type="text/javascript">
  if(!window.localStorage){
　　　　console.log("浏览器不支持localStorage");
　　}else{
　　　　console.log("浏览器支持localStorage");
　　}
</script>

localStorage 写入

　　var storage = window.localStorage;

　　// 写入 a 字段

　　storage["a"]=1;

　　// 写入 b 字段

　　storage.b=1;

　　// 写入 c 字段

　　storage.serItem("c",3);

　　console.log(typeof storage["a"]);

　　console.log(typeof storage["b"]);

　　console.log(typeof storage["c"]);

案例代码

<script type="text/javascript">
  if(!window.localStorage){
　　　　console.log("浏览器不支持localStorage");
　　}else{
　　　　console.log("浏览器支持localStorage");
       localStorage["a"] = "apple";
       localStorage.b="banana";
       localStorage.setItem("c",3);
　　}
</script>

localStorage 存储 JSON 数据

　　var storage = window.localStorage;

　　var data = {

　　　　title : "html" ,

　　　　author : "w3c" ,

　　　　price : 10.99

　　};

　　var d = JSON.stringify(data);

　　storage.setItem("data",d);

　　console.log(storage.data);

案例代码

<script type="text/javascript">

  var storage = window.localStorage;
  var book = {
    title:"html",
    author:"w3c",
    price:10.99,
  };

  console.log(typeof book);  // 打印 book 类型
  var str = JSON.stringify(book); // 转化成字符串
  console.log(typeof str); // 打印 str 类型
  console.log(str);  // 输出字符串

  storage.setItem("book",str);

</script>

localStorage 读取 JSON 数据

　　var json = storage.getItem("data");

　　var jsonObj = JSON.parse(json);

　　console.log(typeof jsonObj);

案例代码

<script type="text/javascript">

  var storage = window.localStorage;
  var book = {
    title:"html",
    author:"w3c",
    price:10.99,
  };

  console.log(typeof book);  // 打印 book 类型
  var str = JSON.stringify(book); // 转化成字符串
  console.log(typeof str); // 打印 str 类型
  console.log(str);  // 输出字符串

  storage.setItem("book",str);

  var str1 = storage.getItem("book");
  var book1 = JSON.parse(str1);

  document.writeln("标题："+book1.title);
  document.writeln("<br/>");
  document.writeln("作者："+book1.author);
  document.writeln("<br/>");
  document.writeln("价格："+book1.price);
  document.writeln("<br/>");

</script>

上一篇：HTML5 简单的Web 存储（lo 下一篇：html 5 | web存储

网站建设

Html

HTML5网页存储

HTML5 WEB 存储

WEB 存储系统

sessionSrorage

创建数据

读取数据

删除数据

练习

localStorage

localStorage 的局限性

localStorage 的浏览器支持判断

localStorage 写入

localStorage 存储 JSON 数据

localStorage 读取 JSON 数据