html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
sessionStorage的用法
数据可以是字符串格式的,也可以是json
1.添加sessionStorage

sessionStorage.setItem("key", "value"); 

2.获取sessionStorage

var value = sessionStorage.getItem("key");

3.删除sessionStorage

sessionStorage.removeItem("key");

4.清除所有sessionStorage

sessionStorage.clear();

 sessionStorage是每个页面都会有的,不同页面直接更改是不能同步的,这里涉及到跨页面操作,跨页面还是建议用localStorage

localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库
   ——注意:在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储,如果存储内容多的话会消耗内存空间,会导致页面变卡。

1.localStorage - 没有时间限制的数据存储

 var arr=[,,];
localStorage.setItem("temp",arr); //存入 参数: 1.调用的值 2.所要存入的数据
console.log(localStorage.getItem("temp"));//输出

 2.清空localStorage

localStorage.clear(); //所有

 3.删除键值对

 localStorage.removeItem("arr");    注意:存入的数据只能以字符串形式存入。
//JSON对象转JSON字符串  var obj = {"a": 1,"b": 2};
obj = JSON.stringify(obj); //转化为JSON字符串
localStorage.setItem("temp2", obj); //JSON字符串转JSON对象
obj=JSON.parse(localStorage.getItem("temp2"));

html5中的Web Storage的更多相关文章

  1. HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

    Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...

  2. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  3. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  4. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  5. html5本地存储web storage的简单使用

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  6. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  7. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  8. H5中使用Web Storage来存储结构化数据

    在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...

  9. 聊聊HTML5中的Web Notification桌面通知

    有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...

随机推荐

  1. BZOJ 4236 "JOIOJI"(前缀和+map+pair)

    传送门: [1]:BZOJ [2]:洛谷 •题解 定义数组 a,b,c 分别表示 'J' , 'O' , 'I' 的前缀和: 要想使区间 (L,R] 满足条件当且仅当 a[R]-a[L] = b[R] ...

  2. MySQL视图 definer & invoker 权限

    1.创建视图 CREATE VIEW `NewView`AS SELECT `user`.USER_ID, `user`.USER_NAME, department.DEPT_ID, departme ...

  3. linux 使用 /proc 文件系统

    /proc 文件系统是一个特殊的软件创建的文件系统, 内核用来输出消息到外界. /proc 下 的每个文件都绑到一个内核函数上, 当文件被读的时候即时产生文件内容. 我们已经见到 一些这样的文件起作用 ...

  4. asp dotnet core 通过图片统计 csdn 用户访问

    在 csdn 的访问统计里面,只能用 csdn 提供的访问统计,因为在 csdn 中不支持在博客加上 js 代码,也就是无法使用友盟等工具统计. 通过在 asp dotnet core 创建一个图片链 ...

  5. LeekCode解题记录

    昨天晚上有个LeekCode的比赛,两个半小时解五题,轻松解决前两题后,卡在第三题,还剩半小时时放弃,开始解第五题,解完但未验证通过,第四题只看了下题目. 排名第一的大佬只用了36分钟全部写完. 差距 ...

  6. dotnet core 获取 MacAddress 地址方法

    本文告诉大家如何在 dotnet core 获取 Mac 地址 因为在 dotnetcore 是没有直接和硬件相关的,所以无法通过 WMI 的方法获取当前设备的 Mac 地址 但是在 dotnet c ...

  7. vue-learning:19 - js - filters

    filters 基本使用 仅限在插值{{}}和v-bind指令中使用 管道符|分隔 链式调用 传入参数 全局注册和局部注册 纯函数性质(不能使用this) 基本使用 我们看下之前用计算属性实现的例子, ...

  8. 洛谷——P1160 队列安排(链表的基础操作)

    #include<bits/stdc++.h> using namespace std; ]; list<int> stus; list<];//用来存放每一项的迭代器 ...

  9. Jenkins安装部署与使用

    一.Jenkins平台安装部署 Jenkins官网免费获取Jenkins软件,官网地址为:http://mirrors.jenkins-ci.org/下载稳定的Jenkins版本.由于Jenkins是 ...

  10. Java 学习笔记(7)——接口与多态

    上一篇说了Java面向对象中的继承关系,在继承中说到:调用对象中的成员变量时,根据引用类型来决定调用谁,而调用成员方法时由于多态的存在,具体调用谁的方法需要根据new出来的对象决定,这篇主要描述的是J ...