【WebStorage篇】


用户登录状态、计数器或者小游戏等,但是又不希望用到数据库,就可以利用Web Storage技术将数据存储在用户浏览器中。

Web Storage是一种将少量数据存储在客户端(Client)磁盘的技术。

(1)     Web Storage的概念

在网页没有Web Storage之前,其实已经有在客户端存储少量数据的功能,称为Cookie,两者有一些不同和相同之处。

l  存储大小不同:Cookie只允许每个网站在客户端存储4KB的数据,而在HTML5的规范中,Web Storage的容量由客户端程序(浏览器)决定,一般而言,通常是1MB~5MB左右。

l  安全性不同:Cookie每次处理网页的请求都会连带发送Cookie值给服务器端(Server),

使得安全性降低;而Web Storage纯粹运行于客户端,不会出现这样的问题。

l  都以一组key-value对应保存数据:Cookies是以一组key-value对应的组合保存数据,Web Storage也是同样的方式。

Web Storage提供两种方式将数据保存在客户端:一种是 localStorage,另一种是sessionStorage,两者的差异在于生命周期和有效范围。

Web Storage类型     生命周期                   有效范围

localStorage       执行删除命令才会消失          同一网站的网页可以跨窗口和分页

sessionStorage    浏览器窗口或分页(tab)关闭就会消失 仅对当前浏览器窗口或分页有效

(2)     localStorage和sessionStorage

localStorage的生命周期及其有效范围与Cookie类似,它的生命周期由网页程序设计者自行指定,不会随着浏览器的关闭而消失,适合于在数据需要分页或跨窗口的场合。关闭浏览器之后除非主动清除数据,否则localStorage数据会一直存在;sessionStorage在关闭浏览器窗口或分页(tab)后数据就会消失,数据也仅对当前窗口或分页有效,适合于暂时保存数据的场合。

(3)     访问localStorage

在HTML5标准中,Web Storage只允许存储字符串数据,有下列3种可供选择的访问方法:

l  Storage对象的setItem 和 getItem方法

l  数组索引

l  属性

(3-1) Storage对象的setItem和getItem方法

存储使用setItem方法:

window.localStorage.setItem(key, value);

window.localStorage.setItem(“userdate”, “Hello”);

当我们想读取userdata数据时,使用getItem方法:

window.localStorage.getItem(key);

var value1 = window.lcoalStorage.getItem(“userdata”);

(3-2) 数组索引

存储语法如下:

window.localStorage[“userdata”] = “Hello”;

读取语法如下:

var value = window.localStorage[“userdata”];

(3-3) 属性

存储语法如下:

window.localStoarge.userdata = “Hello”;

读取语法如下:

var value1 = window.localStorage.userdata;

注:前面的window可以省略不写。

(3-4) 删除localStorage

要删除某一条localStorage数据,可以调用removeItem方法或者dalete属性进行操作:

window.localStorage.removeItem(“userdata”);

delete  window.localStorage.userdata;

delete  window.localStorage[“userdata”];

要想删除localStorage全部数据,可以使用clear()方法:

localStorage.clear();

(4)     访问sessionStorage

sessionStorage只能保存在单一的浏览器窗口或分页(tab),关闭浏览器后存储的数据就消失了。其最大的用途在于保存一些临时的数据,防止用户重新整理网页时不小心丢失这些数据。sessionStorage的操作方法与localStorage相同。

(4-1) 存储

window.sessionStorage.setItem(“userdata”,”Hello”);

window.sessionStorage[“userdata”] = “Hello”;

window.sessionStorage.userdata = “Hello”;

(4-2) 读取

var value1 = window.sessionStorage.getItem(“userdata”);

var value1 = window.sessionStorage[“userdata”];

var value1 = window.sessionStorage.userdata;

(4-3) 清除

window.sessionStorage.removeItem(“userdata”);

delete  window.sessionStorage.userdata;

delete  window.sessionStorage[“userdata”];

// 全部清除

sessionStorage.clear();

在HTML5的标准中,Web Storage只能存入字符串,就算localStorage和sessionStorage存入数字,仍然是字符串类型。

购物车可以使用localStorage。

用户登录可以使用sessionStorage,因为密码最好随着窗口的关闭而删除。

(5)     Cookie 和 session的区别

Cookie以文本格式存储在浏览器上,存储量有限。

Session称为会话信息,位于web服务器上,主要负责访问者与网站之间的交互。

Session存储在服务端,可以无限量存储多个变量并且比cookie更安全。

不同的是,cookie是存储在本地浏览器,而sesion存储在服务器。存储在服务器的数据会更加的安全,不容易被窃取。

但存储在服务器也有一定的弊端,就是会占用服务器的资源。

l  Cookie以文本文件格式存储在浏览器中,而session存储在服务端

l  Cookie的存储限制了存储量,只允许4KB,而session是无限量的

l  我们可以轻松访问cookie值,但是我们无法轻松访问会话值,因此它更安全

WebStorage篇的更多相关文章

  1. TGL站长关于常见问题的回复

    问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...

  2. WebStorage记录滚动条位置

    因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...

  3. 大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  4. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  5. 故障重现(内存篇2),JAVA内存不足导致频繁回收和swap引起的性能问题

    背景起因: 记起以前的另一次也是关于内存的调优分享下   有个系统平时运行非常稳定运行(没经历过大并发考验),然而在一次活动后,人数并发一上来后,系统开始卡. 我按经验开始调优,在每个关键步骤的加入如 ...

  6. 论:开发者信仰之“天下IT是一家“(Java .NET篇)

    比尔盖茨公认的IT界领军人物,打造了辉煌一时的PC时代. 2008年,史蒂夫鲍尔默接替了盖茨的工作,成为微软公司的总裁. 2013年他与微软做了最后的道别. 2013年以后,我才真正看到了微软的变化. ...

  7. [ 高并发]Java高并发编程系列第二篇--线程同步

    高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...

  8. [高并发]Java高并发编程系列开山篇--线程实现

    Java是最早开始有并发的语言之一,再过去传统多任务的模式下,人们发现很难解决一些更为复杂的问题,这个时候我们就有了并发. 引用 多线程比多任务更加有挑战.多线程是在同一个程序内部并行执行,因此会对相 ...

  9. 操作系统篇-调用门与特权级(CPL、DPL和RPL)

    || 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.前言 在前两篇文章(<操作系统篇-浅谈实模式与保护模式>和<操作系统篇-分段机制与GDT|LDT>)中,我们提到 ...

随机推荐

  1. Java 实例 - 状态监测

    以下实例演示了如何通过继承 Thread 类并使用 currentThread.getName() 方法来监测线程的状态: Main.java 文件 1 2 3 4 5 6 7 8 9 10 11 1 ...

  2. netty的原理

    1. Netty简介 Netty是一个高性能.异步事件驱动的NIO框架,基于JAVA NIO提供的API实现.它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作 ...

  3. 在已有QT项目中添加多个UI布局界面

    1.在工程中右键->添加新文件,按图选择 2.选择窗口部件 3.创建UI控制类 注意上图红框中命名按实际需要定义,否则后期改动要修改UI文件参数 4.修改UI文件,框1是窗口部件父类,框2是UI ...

  4. python基础之数据类型初始

    变量 贴标签 变量名规则:只能是字母下划线和数字组成,不能以数字开头,不能和关键字同名,不能使用拼音和中文,具有可描述性,区别大小写,变量名推荐写法:驼峰提,下划线(官方推荐) 变量赋值 常量 特性: ...

  5. LLppdd's class meeting!

    LLppdd's class meeting! Time Limit: 1 s Memory Limit: 256 MB 题目背景 LLppdd 有一个可爱团结的班级,他们会定期举行班会活动...比如 ...

  6. django 内置server 外网不能访问, 报连接超时

    按照官网教程,以 python manage.py runserver 其访问url为 http://127.0.0.1:8000,意味着只能本机访问,而我的django app 部署在 阿里云上面 ...

  7. Vue开发环境安装并集成element-ui示例

    此文为转载,原文链接:https://blog.csdn.net/weixin_44670973/article/details/88871106 在此对原文中部分内容进行补充. 补充:element ...

  8. Feign实现服务调用

    上一篇博客我们使用ribbon+restTemplate实现负载均衡调用服务,接下来我们使用feign实现服务的调用,首先feign和ribbon的区别是什么呢? ribbon根据特定算法,从服务列表 ...

  9. MVC+EF三层+抽象工厂

    MVC+EF三层+抽象工厂项目搭建   注意:项目经过两次搭建,所以截图中顶级命名空间有ZHH和ZHH2区别,但是架构的内容是一样的,可以将ZHH和ZHH2视为同一命名空间 一:权限管理 二:搜索 | ...

  10. rest framework之渲染器

    一.内置渲染器 REST框架包括许多内置的Renderer类,它们允许你使用各种媒体类型返回响应.还支持定义你自己的自定义渲染器. 内置渲染器的使用 1.全局设置 可以使用DEFAULT_RENDER ...