Cookies,localStorage,sessionStorage,Web SQL Database(客户端)会话存储学习

客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据。目前常见的浏览器端数据存储方法有:Cookies,Local Storage,Session Storage,IndexedDB

 

 

取值,存值,删除(用于浏览器存储客户端的访问数据)

1.Cookies

Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话,追踪用户信息等事情。

Cookies 的优点

  • 能用于和服务端通信
  • 当 cookie 快要自动过期时,我们可以重新设置而不是删除

Cookies 的缺点

  • 增加了文档传输的负载
  • 只能存储少量的数据
  • 只能存储字符串
  • 潜在的 安全问题
  • 自从有 Web Storage API (Local and Session Storage),cookies 就不再被推荐用于存储数据了
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Cookies客户端读写title>
    head>
    <body>
         <button type="button" onclick="addCookies()">存值button>
         <button onclick="getCookies()">取值button>
         <button onclick="removeCookies()">删除button>
         <script src="js/js.cookie.js" type="text/javascript" charset="utf-8">script>
         <script type="text/javascript">
             function addCookies(){
                 Cookies.set("price","200",{expires:2});
             }
             function getCookies(){
                 var price=Cookies.get("price");
                 alert('价格'+price);
             }
             function removeCookies(){
                 Cookies.remove("price");
             }
         script>
    body>
html>

 

2.localStorage

Local Storage 是 Web Storage API 的一种类型,能在浏览器端存储键值对数据。Local Storage 因提供了更直观和安全的API来存储简单的数据,被视为替代 Cookies 的一种解决方案。

从技术上说,尽管 Local Storage 只能存储字符串,但是它也是可以存储字符串化的JSON数据。这就意味着,Local Storage 能比 Cookies 存储更复杂的数据。

localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。
过期策略:localstorage永久存储,不过期,除非手动删除,sessionstorage在重启浏览器、关闭页面或新开页面时失效。

Local Storage 的优点

相比于Cookies:

  • 其提供了更直观地接口来存储数据
  • 更安全
  • 能存储更多数据

Local Storage 的缺点

  • 只能存储字符串数据
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>localStorage 本地存储title>
    head>
    <body>
        <button onclick="add()">button>
        <button onclick="read()">button>
        <button onclick="update()">修改button>
        <button onclick="del()">删除button>
        <script type="text/javascript">
            function add(){
                localStorage.setItem("name","平板电脑");
                localStorage["price"]=8000;
                localStorage.number=10;
            }
            function read(){
                console.log(localStorage.getItem("name"));
                console.log(localStorage["price"]);
                console.log(localStorage.number);
            }
            function update(){
                console.log(localStorage.setItem("name","笔记本电脑"));
            }
            function del(){
                localStorage.removeItem("price");
                localStorage.clear();
            }
        script>
    body>
html>

 

3.sessionStorage

sessionStorage:浏览器关闭后其内部setItem的值会被自动删除
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>sessionStorage 本地存储title>
    head>
    <body>
        <button onclick="add()">添加button>
        <button onclick="read()">获取button>
        <button onclick="del()">删除button>
        <button onclick="update()">修改button>
        <span id="span1">span>
        <h1 id="msg">h1>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8">script>
        <script type="text/javascript">
            var msg=document.querySelector("#msg");
            
            var name=sessionStorage.getItem("name");
                $("#span1").html(name);
            
            
            
            function add(){
                sessionStorage.setItem("name","小米");
                sessionStorage["price"]=2000;
                sessionStorage.number=2;
            }
            function read(){
                
                console.log(sessionStorage.getItem("name"));
                console.log(sessionStorage["price"]);
                console.log(sessionStorage.number);
                
                msg.innerHTML+=sessionStorage.getItem("name")+"
"; msg.innerHTML+=sessionStorage["price"]+"
"; msg.innerHTML+=sessionStorage.number+"
"; } function del(){ sessionStorage.removeItem("price"); sessionStorage.clear(); } function update(){ sessionStorage.setItem("name","红米"); } script> body> html>

 

4.Web SQL Database

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <style>
        #file1{
            width: 300px;
            height: auto;
        }
    style>
    <body>
        <h1>Web SQL Databaseh1>
        <table id="table1" border="1">
            <tr>
                <th>序号th>
                <th>编号th>
                <th>名称th>
                <th>价格th>
                <th>操作th>
            tr>
        table><br />
        <fieldset id="file1">
            <legend>商品信息legend>
            <input type="hidden" id="id" name="id" /><br />
            <label for="id">编号:label>
            <input type="text" id="fid" name="fid" /><br />
            <label for="name">名称:label>
            <input type="text" id="name" name="name" /><br />
            <label for="price">价格:label>
            <input type="text" id="price" name="price" /><br /><br />
            <button onclick="insert()">添加button> 
            <button ondblclick="update()">更新button>
        fieldset>
        <h2 id="msg">h2>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8">script>
        <script type="text/javascript">
            var db;

            function createfiuitsDB() { //创建/打开数据库
                db = openDatabase("fruitsDB", 1.0, "水果数据库", 1024 * 1024 * 3, function() {
                    log("创建/打开数据库成功");
                });
            }
            
            createfiuitsDB();
            createtable();
            select();

            function createtable() { //创建表
                db.transaction(function(tx) {
                    tx.executeSql("create table if not exists fruits(id integer primary key autoincrement,fid int not null,name text not null,price float not null)", [], function(tx, result) {
                        log("创建表成功");
                    }, function(tx, error) {
                        log("创建表失败" + error.Message);
                    });
                });
            }

            function droptable() { //删除表
                db.transaction(function(tx) {
                    tx.executeSql("drop table if exists fruits", [], function(tx, result) {
                        log("删除表成功");
                    }, function(tx, error) {
                        log("删除表失败" + error.Message);
                    });
                });
            }

            function select() {  //加载数据
                $("#table1 tr:gt(0)").remove();
                db.transaction(function(tx) {
                    tx.executeSql("select id,fid,name,price from fruits", [], function(tx, result) {
                            for(var i = 0; i < result.rows.length; i++) {
                                var tr = $("");
                                $("").text(result.rows.item(i)["id"]).appendTo(tr);
                                $("").text(result.rows.item(i)["fid"]).appendTo(tr);
                                $("").text(result.rows.item(i)["name"]).appendTo(tr);
                                $("").text(result.rows.item(i)["price"]).appendTo(tr);
                                var del = $("")
                                var edit = $("")
                                $("").append(del).append(edit).appendTo(tr);
                                tr.appendTo("#table1");
                            }
                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }
            
            function edit(id) {   //编辑数据
                db.transaction(function(tx) {
                    tx.executeSql("select id,fid,name,price from fruits where id=?", [id],function(tx, result) {
                            $("#fid").val(result.rows.item(0)["fid"]);
                            $("#name").val(result.rows.item(0)["name"]);
                            $("#price").val(result.rows.item(0)["price"]);
                            $("#id").val(result.rows.item(0)["id"]);
                        },
                        function(tx, error) {
                            log('编辑失败' + error.message);
                        });
                });
                select();
            }

            function insert() { //添加数据
                var f = document.getElementById("fid").value;
                var n = document.getElementById("name").value;
                var p = document.getElementById("price").value;
                db.transaction(function(tx) {
                    tx.executeSql("insert into fruits(fid,name,price) values(?,?,?)", [f, n, p], function(tx, result) {
                        log("添加成功");
                    }, function(tx, error) {
                        log("添加失败" + error.Message);
                    });
                });
                select();
            }

            function update() { //更新数据
                var i = document.getElementById("id").value;
                var f = document.getElementById("fid").value;
                var n = document.getElementById("name").value;
                var p = document.getElementById("price").value;
                db.transaction(function(tx) {
                    tx.executeSql("update fruits set fid=?,name=?,price=? where id=?", [f,n,p,i], function(tx, result) {
                        log("修改成功");
                    }, function(tx, error) {
                        log("修改失败" + error.Message);
                    });
                });
                select();
            }

            function del(id, link) { //删除数据
                db.transaction(function(tx) {
                    tx.executeSql("delete from fruits where id=?", [id],function(tx, result) {        
                            $(link).closest("tr").remove();
                            log('删除成功');
                        },
                        function(tx, error) {
                            log('删除失败' + error.message);
                        });
                });
            }
            
            function log(info) {
                $("#msg")[0].innerHTML += info + "
"; } script> body> html>
View Code

 

转载于:https://www.cnblogs.com/liangyaofeng/p/10070112.html

你可能感兴趣的:(Cookies,localStorage,sessionStorage,Web SQL Database(客户端)会话存储学习)