使用HTML5 Web存储的localStorage和sessionStorage方式

简介: localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失。

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失。

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异,如使用方法、最大存储空间等。


一、localStorage API 基本使用方法

localStorage API 使用方法简单易懂,如下为常见的 API 操作及示例: 设置数据:localStorage.setItem(key,value); 示例:

?
1
2
3
for (var i= 0 ; i< 10 ; i++){
  localStorage.setItem(i,i);
}

获取数据:localStorage.getItem(key) 获取全部数据:localStorage.valueOf() 示例:

?
1
2
3
for (var i= 0 ; i< 10 ; i++){
  localStorage.getItem(i);
}

删除数据:localStorage.removeItem(key) 示例:

?
1
2
3
for (var i= 0 ; i< 5 ; i++){
  localStorage.removeItem(i);
}

清空全部数据:localStorage.clear() 获取本地存储数据数量:localStorage.length 获取第 N 个数据的 key 键值:localStorage.key(N)


2. 遍历 key 键值方法

?
1
2
3
for (var i=localStorage.length -  1  ; i >= 0 ; i--){
  console.log( '第' + (i+ 1 ) + '条数据的键值为:'  + localStorage.key(i) + ',数据为:'  + localStorage.getItem(localStorage.key(i)));
}


3. 存储大小限制测试及异常处理

3.1 数据存储大小限制测试

不同浏览器对 HTML5 的本地存储大小基本均有限制,一个测试的结果如下:

?
1
2
3
4
5
IE  9           4999995  5  5000000
firefox  22.0  5242875  5  5242880
chrome   28.0   2621435  5  2621440
safari   5.1    2621435  5  2621440
opera    12.15  > 5M (超出则会弹出允许请求更多空间的对话框)

测试代码参考:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<! DOCTYPE  html>
< html >
< head >
< script >
  function log( msg ) {
      console.log(msg);
      alert(msg);
  }</ p >
< p > var limit;
  var half = '1'; //这里会换成中文再跑一遍
  var str = half;
  var sstr;
  while ( 1 ) {
      try {
          localStorage.clear();
          str += half;
          localStorage.setItem( 'cache', str );
          half = str;
      } catch ( ex ) {
          break;
      }
  }
  var base = str.length;
  var off = base / 2;
  var isLeft = 1;
  while ( off ) {
      if ( isLeft ) {
          end = base - (off / 2);
      } else {
          end = base + (off / 2);
      }</ p >
< p >     sstr = str.slice( 0, end );
      localStorage.clear();
      try {
          localStorage.setItem( 'cache', sstr );
          limit = sstr.length;
          isLeft = 0;
      } catch ( e ) {
          isLeft = 1;
      }</ p >
< p >     base = end;
      off = Math.floor( off / 2 );
  }</ p >
< p > log( 'limit: ' + limit );
</ script >
</ html >

3.2 数据存储异常处理

?
1
2
3
4
5
6
7
8
9
10
try {
  localStorage.setItem(key,value);
} catch (oException){
  if (oException.name ==  'QuotaExceededError' ){
   console.log( '超出本地存储限额!' );
   //如果历史信息不重要了,可清空后再设置
   localStorage.clear();
   localStorage.setItem(key,value);
  }
}



总结:

H5的两种存储技术的最大区别就是生命周期。localStorage是本地存储,存储期限不限;sessionStorage会话存储,页面关闭数据就会丢失。

使用方法:

localStorage.setItem(“key”,“value”)//存储

localStorage.getItem(key)//按key进行取值

localStorage.valueOf( )//获取全部值

localStorage.removeItem(key)//删除单个值

localStorage.clear()//删除全部数据

localStorage.length//获得数据的数量

localStorage.key(N)//获得第N个数据的key值

注:localStorage和sessionStorage用法相同

若转载请注明出处!若有疑问,请回复交流!
目录
相关文章
|
3月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
44 6
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
40 5
|
3月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
3月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
3月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
3月前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
3月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
143 0
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
172 3
|
28天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南