Web_Storage

2019-01-31

在学HTML5的时候，遇到了Web Storage

不同于之前一些标签的操作，这是一种提供客户端存储数据的方法

学习的书籍是HTML5+CSS3从入门到精通

Web Storage API

首先我们要知道Web Storage API 提供了两种客户端数据存储的方法：

1）localStorage：用于持久化的本地存储，除非主动删除，否则数据永远不过期

2）sessionStorage：用于存储session本地会话数据，只有在一个会话周期内才能访问，会话结束后数据也会随之销毁，如关闭网页

优势

那么benefits到底有哪些呢？

我们都知道客户端处理网页数据主要通过cookie来实现，但是cookie容量是有限的

1）优势1：存储空间比cookie大得多

2）优势2：存储内容不会反馈给服务器，二cookie信息会随着请求一并发送给服务器

3）优势4：独立的存储空间，每个域有各自独立的存储空间，不会造成数据混乱

缺陷

1）缺陷1：存储数据未加密

2）缺陷2：浏览器不会检查脚本所在域与当前域是否相同，当然，如果浏览器厂商想弥补的话还是很容易的

使用方法

1）存储 — setItem()

e.g.

localStorage.setItem(‘key’,’value’);

2）访问 — getItem()

e.g.

var value = localStorage.getItem(‘key’);

3）删除 — removeItem()

e.g.

localStorage.removeItem(‘key’)

4）清空 — clear()

e.g.

localStorage.clear()

例子1 — 一个登陆界面

代码如下

<!DOCTYPE html>
<html lang="en">
<style>
    ul{
        list-style-type: none;
        padding: 3px 6px;
    }
    ul li{
        margin: 6px;
    }
    .title{
        margin-top: 12px;
    }
    .status{
        border: 1px solid #999999;
        background-color: #cccccc;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body onload="pageload();">
<form id="Login" action="#">
    <fieldset>
        <legend>用户登录</legend>
        <ul>
            <li>用户名：<input id="name" class="txt" type="text"></li>
            <li>密&nbsp;&nbsp;&nbsp;码：<input id="password" class="txt" type="password"></li>
            <li><input id="save" type="checkbox">是否保存密码</li>
            <li><input name="btn" class="btn" type="button" value="登陆" onclick="btn_click();">
                <input name="rst" class="btn" type="reset" value="取消" onclick="btn_click();"></li>
            <li class="title"><span id="status"></span></li>
        </ul>
    </fieldset>
</form>
<script>
    function pageload() {
        var name = localStorage.getItem('name');
        var pass= localStorage.getItem('pass');
        if(name){
            document.getElementById('name').value = name;
        }
        if(pass){
            document.getElementById('password').value = pass;
        }
    }
    
    function btn_click() {
        var name = document.getElementById('name').value;
        var pass = document.getElementById('password').value;
        localStorage.setItem('name',name);
        if(document.getElementById('save').checked){
            localStorage.setItem('pass',pass);
        }
        else {
            localStorage.removeItem('pass');
        }
        document.getElementById('status').className = 'status';
        document.getElementById('status').innerHTML = '登陆成功';
    }
</script>
</body>
</html>

我们尝试一下不保存密码的登陆后，可以看到cookie还是空的，但localStorage里面有一些变化

例子2 — 流量统计

这个其实就是一个简单的sessionStorage和localStorage的读取，方法还是比较简单的，贴一下代码，有兴趣的可以试一下效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flow</title>
</head>
<body>
<h1>计数器</h1>
<p class="msg" id="msg_1"></p>
<p class="form_item">
    <label fo="">Storage: </label>
    <input type="text" name="text-1" value="" id="text-1">
</p>
<p class="form_item">
    <input type="button" name="btn-1" value="session 保存" id="btn-1">
    <input type="button" name="btn-2" value="session 读取" id="btn-2">
    <input type="button" name="btn-3" value="local 保存" id="btn-3">
    <input type="button" name="btn-4" value="local 读取" id="btn-4">
</p>
<p class="count_wrap">本页 session 访问次数： <span class="count" id="session_count"></span>
    &nbsp;&nbsp;&nbsp;本页 local 访问次数： <span class="count" id="local_count"></span>
</p>
<script>
    function getE(ele) {
        return document.getElementById(ele);
    }
    var text_1 = getE('text-1');
    var mag = getE('msg_1');
    var btn_1 = getE('btn-1');
    var btn_2 = getE('btn-2');
    var btn_3 = getE('btn-3');
    var btn_4 = getE('btn-4');
    btn_1.onclick = function () {
        sessionStorage.setItem('msg','sessionStorage = '+ text_1.value);
    };
    btn_2.onclick = function () {
        mag.innerHTML = sessionStorage.getItem('msg');
    };
    btn_3.onclick = function () {
        localStorage.setItem('msg','localStorage = '+ text_1.value);
    };
    btn_4.onclick = function () {
        mag.innerHTML = localStorage.getItem('msg');
    };
    //记录页面次数
    var local_count = localStorage.getItem('a_count')?localStorage.getItem('a_count'):0;
    getE('local_count').innerHTML = local_count;
    localStorage.setItem('a_count',local_count+1);
    var session_count = sessionStorage.getItem('a_count')?sessionStorage.getItem('a_count'):0;
    getE('session_count').innerHTML = session_count;
    localStorage.setItem('a_count',session_count+1);
</script>
</body>
</html>

本文作者： xiaoyuyu
本文链接： http://woaixiaoyuyu.github.io/2019/01/31/Web-Storage/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！