WebStorageƪ

匿名 (未验证) 提交于 2019-12-02 23:40:02

【WebStorage篇】


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

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

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

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

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

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

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

(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”);

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

localStorage.clear();

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”);

// 全部清除

sessionStorage.clear();

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

购物车可以使用localStorage。

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

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

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

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

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!