HTML5笔记(二) WebStorage，WebSQL

最新推荐文章于 2023-09-02 09:20:37 发布

芹菜King

最新推荐文章于 2023-09-02 09:20:37 发布

阅读量176

点赞数

分类专栏： HTML5 文章标签： html5 前端 node.js

本文链接：https://blog.csdn.net/qq_39535240/article/details/124746870

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5笔记(三)

1.Web Storage

cookie实际上是一段以键值对形式存在的文本信息，当客户端向服务端发起请求时，服务端如果需要记录此用户状态，可以使用response向客户端浏览器颁发cookie，此时客户端会把Cookie保存起来，当浏览器再次请求此网站时，浏览器会把请求的网址连同Cookie一同提交给服务器。
cookie运行的整体流程为【客户端发送请求–>服务器返回包含有cookie的response–>客户端保存cookie，下次请求时，会发送带有cookie内容–>服务器根据cookie返回response】

这里使用nodejs作为后端进行流程演示

安装依赖，需要在nodejs环境中尝试

npm install express
npm install cookie-parser
npm install body-parser

后端nodejs代码

// 引入依赖
const express = require('express')
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');

// 生成接收请求的对象
const app = express();

// 解决跨域
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
  res.header('Access-Control-Allow-Methods', 'POST,GET');
  res.header("Access-Control-Max-Age", "3600");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

// 引入中间件
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// POST请求，根据接收到的内容设置cookie
app.post('/set', (req, res) => {
  res.cookie("cookie", req.body.value+'2',{maxAge: 900000, path:'http://127.0.0.1:5500/'});
  
  res.send(200,req.body.value+'2');
});

// GET请求，获取cookie内容
app.get('/get',(req, res) => {
  res.status(200).send(req.cookies.cookie!=undefined?req.cookies.cookie+'3':'');
});

// 端口监听
app.listen(3000, () => {
  console.log('示例应用正在监听 3000 端口!');
});

前端HTML页面代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <title>Document</title>
  <script>
    // 设置cookie信息，步骤1
    function setCookie() {
      var value = document.getElementById('value').value;
      value+='1';
      var req = new XMLHttpRequest();
      req.withCredentials = true;
      req.open('POST','http://127.0.0.1:3000/set');
      req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      req.onreadystatechange = function() {
      if(req.readyState==4 && req.status == 200) {
          alert('cookie设置完毕:'+req.responseText);
        }
      }
      req.send('value='+value);
    }

    // 获取cookie信息，步骤4
    function getCookie(){
      var req = new XMLHttpRequest();
      req.withCredentials = true;
      req.open('get','http://127.0.0.1:3000/get');
      req.onreadystatechange = function() {
      if(req.readyState==4 && req.status == 200) {
          document.getElementById('cookieShow').innerHTML=req.responseText?req.responseText+'4':'';
        }
      }
      req.send();
    }
    getCookie();
  </script>
</head>
<body>
  <input type="text" id="value">
  <button onclick="setCookie()">点我设置cookie</button>
  <p id="cookieShow"></p>
</body>
</html>

配置前

不存在cookie
配置
配置后刷新页面

但cookie存在有一定的缺陷，比如cookie作为存储容器，其大小限制在4k左右，只能存储一些配置信息等，cookie会被附加到每次的http请求中，并且在请求与响应中都会被传输，也增加了一定的非必要的流量损失。
WebStorage是HTML5中新增的本地存储解决方案，可以解决一些cookie难以做到，或做不到的功能。其存储限制相对于4k，扩大了很多，达到了5m，并且信息不会再附加到http请求中。

WebStorage中存在有两个对象localStorage和sessionStorage，前者可以长久保存整个网站（同一origin下）的数据，没有过期时间，直到手动去除才会消失；后者用于临时保存同一窗口或标签页的数据，在关闭窗口或标签页之后数据会被删除。

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
  <script>
    function setLocal() {
      localStorage.setItem('local',document.getElementById('local').value);
    }
    function setSession() {
      sessionStorage.setItem('session',document.getElementById('session').value);
    }
    function getLocal() {
      alert(localStorage.getItem('local'));
    }
    function getSession() {
      alert(sessionStorage.getItem('session'));
    }
  </script>
</head>
<body>
  <input type="text" id="local"><button onclick="setLocal()">点我设置localStorage</button"><button onclick="getLocal()">点我查看localStorage</button>
  <br/>
  <input type="text" id="session"><button onclick="setSession()">点我设置sessionStorage</button><button onclick="getSession()">点我查看sessionStorage</button>
</body>
</html>

设置前
设置后
页面重新打开前查看各个storage
页面重新打开后。sessionStorage已经消失
点击查看session按钮也不会出现之前输入的内容

2.WebSQL

WebStorage中存储的只是简单的键值对，当需要一些结构化的数据时，可以使用WebSQL进行实现。

其中主要有三个方法，打开已有数据库或创建数据库openDatabase，事务处理transaction，执行SQL语句executeSql。下面为学生信息登录示例。

<!DOCTYPE html>
<html lang="zh">
<head>
  <script>
    function create() {
      // 创建数据库，或打开数据库，参数依次为：数据库名，版本号，数据库描述，大小，创建回调（创建数据库后会调用）
      var a = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,()=>{console.log('成功创建数据库')});
      // 事务处理，参数为一个函数，接收用于执行SQL语句的事务
      a.transaction(function(tx){  
        // 执行SQL语句，参数依次为：SQL语句，占位符用?代替，替换占位符的数据，成功回调(事务处理，结果)=>{}，失败回调(事务处理，错误信息)=>{}。
        tx.executeSql('CREATE TABLE IF NOT EXISTS STUDENTS (id unique,name,age,sex)',[],()=>{},function(tx, error){
            console.log(error);//建表失败
        });
      });
      return a;
    }
    var db = create();
    function insert(){
      var name=sessionStorage.getItem('name');
      var age=sessionStorage.getItem('age');
      var sex=sessionStorage.getItem('sex');
      db.transaction((tx)=>{
        tx.executeSql('INSERT INTO STUDENTS (id,name,age,sex) VALUES (?,?,?,?)',[Date.now(),name,age,sex],()=>{},function(tx, error){
            console.log(error);//建表失败
        });
      })
    }
    function makeTale(rows){
      var body = '';
      for (let index = 0; index < rows.length; index++) {
        let row = rows.item(index);
        body+= `<tr>
          <td>${row.id}</td><td>${row.name}</td><td>${row.age}</td><td>${row.sex}</td>
          </tr>`
      }
      return `
      <table border='1'>
      <thead>        
          <tr>
            <th>ID</th><th>姓名</th><th>年龄</th><th>性别</th>
          </tr>
      </thead>
      <tbody>
        ${body}
      </tbody>
      </table>`;
    }
    function select(){
      var name=sessionStorage.getItem('selectname');
      db.transaction((tx)=>{
        tx.executeSql('SELECT * FROM STUDENTS WHERE name=?',[name],(tx,result)=>{
          var rows = result.rows;
          var table = document.getElementById('table')
          table.innerHTML='';
          console.log(result.rows);
          if(result.rows.length>0){
            table.innerHTML = makeTale(rows);
          }
          else{
            table.innerHTML='<p>没有数据存储在表中</p>'
          }
          console.log(result.rows);
        });
      })
    }
    function selectAll() {
      db.transaction((tx)=>{
        tx.executeSql('SELECT * FROM STUDENTS',[],(tx,result)=>{
          var rows = result.rows;
          var table = document.getElementById('table')
          table.innerHTML='';
          console.log(result.rows);
          if(result.rows.length>0){
            table.innerHTML = makeTale(rows);
          }
          else{
            table.innerHTML='<p>没有数据存储在表中</p>'
          }
          console.log(result.rows);
        });
      })
    }
    function changeName(e){
      sessionStorage.setItem('name',e.target.value);
    }
    function changeAge(e){
      sessionStorage.setItem('age',e.target.value);
    }
    function changeSex(e){
      sessionStorage.setItem('sex',e.target.value);
    }
    function changeSelectName(e){
      sessionStorage.setItem('selectname',e.target.value);
    }
    changeSex({target:{value:'男'}});
  </script>
</head>
<body>
  <section>
    姓名：<input type="text" onchange="changeName(event)">
    年龄：<input type="number" name="" id="" onchange="changeAge(event)">
    性别：<select name="" onchange="changeSex(event)">
      <option value="男">男</option>
      <option value="女">女</option>
      <option value="保密">保密</option>
    </select>
    <button onclick="insert()">添加</button>
  </section>
  <section>
    姓名：<input type="text" onchange="changeSelectName(event)">
    <button onclick="select()">查找</button>
    <button onclick="selectAll()">查找全部</button>
  </section>
  <section id="table">
  </section>
</body>
</html>