WebStorage篇
【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值,但是我们无法轻松访问会话值,因此它更安全
最新文章
- .NET Core下的日志(1):记录日志信息
- postMessage
- cisco nat
- 关键字 explicit
- Baidu Map Web API 案例
- Html小插件
- Python基础 3----文件和网络
- 一个神奇SQL引发的故障【转】
- PAT (Advanced Level) 1040. Longest Symmetric String (25)
- C#调用TSC条码打印机打印条码
- 使用python+Selenium对空调控制器进行循环发送控制命令
- 微信内置浏览器 如何小窗不全屏播放视频?也可以尝试canvas.
- C#获取某一路径下的所有文件名信息(包括子文件夹)
- go-ehtereum编译:
- 无返回值的异步方法能否不用await
- 洛谷 P2292 [HNOI2004] L语言 解题报告
- spring boot application.properties 配置参数详情
- 【javascript】分享一款经典的日期控件 My97DatePicker
- PHP学习必读的20本书
- [摘]全文检索引擎Solr系列—–全文检索基本原理
热门文章
- java %d %n \n
- java多线程学习笔记(四)
- [ERR] 153 - Got a packet bigger than 'max_allowed_packet' bytes
- MVC中的自定义标签分页控件,仅供大家学习!!
- Spring注解之@Component、@Controller、@Service、@Repository
- Mysql中(@i:=@i+1)的作用
- guake No D-BUS daemon running
- Cloudflare-为自己的网站&;博客保驾护航
- java中的继承、重载和覆盖是什么意思
- 前后端分离进行权限管理之后端API返回菜单及权限信息(三)