Web本地存储

通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全, 并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。

本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。

1. Web存储介绍

(1)本地存储,对应 localStorage 对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。

(2)会话存储,对应 sessionStorage 对象。用于临时保存针对一个窗口(或标签页)的数据。 在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。

2. 本地存储与会话存储的异同.

(1)本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。

(2)本地存储主要用来保存访客将来还能看到的数据。

(3)会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。

3. Web存储容量限制

大多数浏览器都把本地存储限制为 5MB 以下。

4. 实例

(1)文本数据的保存和读取

localStorage.setItem("user_name","hangge.com");
var userName = localStorage.getItem("user_name");

(2)数值的保存和读取

localStorage.setItem("user_age",100);
var userAge = Number(localStorage.getItem("user_age"));

(3)日期的保存和读取

//创建日期对象
var today = new Date(); //按照YYY/MM/DD的标准格式把日期转换成文本字符串,然后保存为文本
var todayString = today.getFullYear() + "/" + today.getMonth() + "/" + today.getDate();
localStorage.setItem("session_started", todayString); //取得日期文本,并基于该文本创建新的日期对象
var newToday = new Date(localStorage.getItem("session_started"));
alert(newToday.getFullYear());

(4)自定义对象的保存和读取

//自定义一个User对象
function User(n, a, t) {
    this.name = n;
    this.age = a;
    this.telephone = t;
} //创建User对象
var user = new User("hangge", 100, "123456");
//将其保存为方便的JSON格式
sessionStorage.setItem("user", JSON.stringify(user)); //跳转页面
//window.location = "hangge.html"; //将JSON文本转回原来的对象
var user2 = JSON.parse(sessionStorage.getItem("user"));
alert(user2.name);

(5)检测某个键的值是否为空,可以直接测试是否等于null

if(localStorage.getItem("user_name") == null){
    alert("用户名不存在!");
}

(6)删除数据项

localStorage.removeItem("user_name");

(7)清除所有数据

localStorage.clear();

storage事件

HTML5 还为我们带来了和 Storage 相关的事件。事件发生有两个条件:

1. localStorage 的内容被改变;

2. 改变发生在另一个网页中(很多人都忽略了这个条件)。

window.addEventListener('storage', function(e) {
    var key = e.key;
    var old_value = e.oldValue;
    var new_value = e.newValue;
    var url = e.url;
}, false); 参考链接:多个标签之间共享sessionStorage
web本地存储

web本地存储的更多相关文章

  1. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  2. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  3. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  4. Html5 web 本地存储 (localStorage、sessionStorage)

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

  5. Html5 web本地存储

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  6. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  7. web本地存储 sessionStorage 和 localStorage

    1.sessionStorage  临时存储 为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载. 2.localStorage 长期存储 与sessionStorage一样,但在 ...

  8. web本地存储-IndexedDB

    IndexedDB, HTML5中的一种数据存储方式,索引数据库. 一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称.一个数据库可包含多个对象存储,一个对象存储相当于 ...

  9. web本地存储-LocalStorage

    LocalStorage是HTML5 提供的在客户端存储数据的方法.替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上.目 ...

随机推荐

  1. eclipse中tomcat 中server location灰色,如何修改?

    Eclipse中tomcat service设置选择window ----show view---services可以看到服务的面板双击tomcat进入配置界面Service Locations(Sp ...

  2. RobotFramwork安装报错name 'execfile' is not defined

    安装RobotFramwork的时候,提示了这个?是什么原因呢? 本机装的是python3.6: 经官方回复得知识因为python的版本不兼容该模块的安装. 官方认定版本是2.7,所以这里推荐大家玩p ...

  3. Centos7 安装keepalived实现高可用

    场景:尝试安装keepalived实现高可用,进而在suse环境中部署. 测试过程需要配合Nginx的相关知识:Centos7 Nginx安装 1 安装过程 问题 !!! OpenSSL is not ...

  4. (转)linux常用查看硬件设备信息命令

    场景:在一篇博客中看到这些总结性命令,感觉很实用就转载,以后用到进行相关的整理 系统 # uname -a # 查看内核/操作系统/CPU信息 # lsb_release -a # 查看操作系统版本 ...

  5. ES6中的类

    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...

  6. vscode 开发.net core 从安装到部署 教程详解

    一:环境准备: windows系统需要 win7 sp1 / windows 8  / windows 2008 r2 sp1 / windows10: 其他版本的windows系统在安装.NET C ...

  7. 【bzoj1458】士兵占领

    Description 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里不能放置士兵.我们称这些士兵占领了整个棋盘当满足第i行至少放 ...

  8. ubuntu下统计目录及其子目录文件个数

    查看某目录下文件的个数 ls -l |grep "^-"|wc -l 或 find ./company -type f | wc -l 查看某目录下文件的个数,包括子目录里的. l ...

  9. jQuery基础知识总结二

     * DOM操作 *1 基本操作 * html() - 等价于innerHTML属性 * text() - 等价于textContent属性 * val() - 等价于value属性 * attr() ...

  10. html5 mdn一些精彩的案例

    https://developer.mozilla.org/zh_CN/docs/Games/Examples