`
zhanying
  • 浏览: 8790 次
社区版块
存档分类
最新评论

JavaScript强化教程——sessionStorage和localStorage

阅读更多
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)

html5 web storage的浏览器支持情况

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){     alert("浏览支持localStorage") }else{    alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }
localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

localStorage和sessionStorage的方法

setItem存储value

用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:

sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem获取value

用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem删除key

用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:

sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value

用途:清除所有的key/value
用法:.clear()
代码示例:

sessionStorage.clear(); localStorage.clear();
其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage; for (var i=0, len = storage.length; i  <  len; i++){     var key = storage.key(i);     var value = storage.getItem(key);     console.log(key + "=" + value); }
分享到:
评论

相关推荐

    HTML5与CSS3基础教程(第8版)中文高清PDF切白边

    4. **Web Storage**:HTML5引入了两种新的本地存储机制——SessionStorage和LocalStorage,使得网站可以在用户浏览器上持久保存数据,增强应用的交互性和性能。 5. **Canvas绘图**:HTML5的元素提供了JavaScript...

    12款实用的HTML5实例源码

    2. **Web Storage**:HTML5引入了两种存储机制——SessionStorage和LocalStorage,解决了Cookie存储容量限制的问题,使网页能更高效地存储用户数据。 3. **Audio和Video**:HTML5提供了原生的音频和视频播放支持,...

    JavaScript语言教程:JavaScript简单介绍

    ### JavaScript语言教程:JavaScript简单介绍 #### 一、JavaScript概览 **JavaScript**是一种轻量级的编程语言,主要用于Web应用程序开发。它被设计用来给HTML网页添加动态效果,使得网页更加互动和活跃。...

    html5.0优护官网

    Web Storage则提供了两种存储方式——sessionStorage和localStorage,相较于Cookie,它们提供了更大的存储空间和更快的读写速度。 7. **表单控件增强**:HTML5对表单控件进行了大量改进,新增了date、time、email、...

    JavaScript程序天下实例参考手册随书光盘(之三)——入门教程

    9. **Web存储**:包括localStorage和sessionStorage,用于在浏览器中持久化数据。 10. **调试与测试**:学习如何使用浏览器内置的开发者工具进行代码调试,以及单元测试和集成测试的重要性。 通过这份"JavaScript...

    localstorage搜索框记住历史记录功能

    与`sessionStorage`不同,`localStorage`的数据不会随着浏览器会话的结束而消失,而是会一直存在,直到被明确删除。这就为实现搜索历史记录功能提供了理想的平台。 首先,我们需要监听搜索框的`input`或`keyup`事件...

    Javascript完全自学宝典

    - 刷新时如何保持用户状态(如通过sessionStorage或localStorage保存数据)。 - 在复杂页面结构中刷新局部区域的技术(如使用AJAX更新DOM元素)。 #### 二、JavaScript进阶技巧 1. **JavaScript进阶篇:486个...

    javascript经典特效---保存页面的链接.rar

    随着HTML5的推出,Web Storage(包括localStorage和sessionStorage)提供了更大的存储空间,它们允许开发者在用户浏览器中存储键值对数据,非常适合用来保存页面链接。 1. localStorage:它的数据没有过期时间,...

    localstorage-management:这个 javascript 库为 manager localstorage 提供了一个功能

    **本地存储管理——深入理解JavaScript中的localStorage** 在Web开发中,数据存储是一个至关重要的环节,尤其是在客户端存储用户信息、设置或其他关键数据时。JavaScript提供了一种名为`localStorage`的机制,它...

    android webview 中localStorage无效的解决方法

    除了localStorage,HTML5还提供了另一种本地存储方式——sessionStorage,它在浏览器会话关闭后会被清除,而localStorage则长期保存。了解这些存储方式的差异和应用场景对于优化应用性能和用户体验非常重要。 在...

    网页设计必备——html初级教程

    5. 存储机制:介绍Web Storage(包括localStorage和sessionStorage)以及IndexedDB,用于在浏览器中存储数据。 6. Web Workers:讲解如何使用Web Workers提升网页的计算性能,实现后台处理。 7. Responsive Design:...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    Web SQL Database的使用比localStorage和sessionStorage复杂得多,它要求开发者具备一定的数据库知识。 由于篇幅限制,本文不再详细介绍Web SQL Database的使用,但是应该注意,它的替代方案IndexedDB在现代浏览器...

    网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例.zip

    4. **数据存储**:可能使用`localStorage`或`sessionStorage`来临时保存用户选择的商品信息,以便在提交订单时使用。 5. **动画效果**:为了增强用户体验,可能会使用CSS3动画或JavaScript的`requestAnimationFrame...

    JavaScript参考手册大全合集.chm

    9. **Web存储**:localStorage、sessionStorage和IndexedDB的使用和注意事项。 10. **框架和库**:React、Vue、Angular等前端框架的基本概念和用法,以及jQuery等库的功能和优势。 这两份手册全面覆盖了JavaScript...

    [JavaScript网页编程从入门到精通].庞永庆等.扫描版

    10. **Web存储和本地API**:包括Web Storage(localStorage和sessionStorage)以及IndexedDB,用于在浏览器中持久化数据。 11. **Web Workers**:利用多线程提升JavaScript的性能,处理计算密集型任务。 12. **...

    javascript经典特效---主页制作器.rar

    6. 数据存储:为了保存用户自定义的主页设置,JavaScript可能还会使用Cookie或Web Storage(localStorage和sessionStorage)来在本地存储数据。 7. 响应式设计:现代网页需要适应不同的设备和屏幕尺寸。JavaScript...

    从入门到精通HTML5——PDF——网盘链接

     3.2.4 粗体、斜体、下划线——strong、em、u 46  3.2.5 上标与下标——sup、sub 47  3.2.6 设置删除线——strike 48  3.2.7 等宽文字标记——code 49  3.2.8 空格——&amp;nbsp; 49  3.2.9 其他特殊符号 50 ...

    HTML5保卫星球射击小游戏.zip

    Web Storage分为sessionStorage和localStorage,前者在浏览器会话关闭后数据消失,后者则能长期保存。 至于标签"js特效-HTML5保卫星球射击小游戏",它暗示了游戏可能包含一些JavaScript特效,比如粒子爆炸效果、...

    js处理文件——文件读写例子.zip

    但可以使用Web Storage(localStorage或sessionStorage)或者IndexedDB来存储数据。另外,可以通过FileWriter接口在离线Web应用程序(使用AppCache)中写入文件。 6. **Blob和ArrayBuffer** 如果需要处理二进制...

    HTML5——demo

    此外,HTML5的Web Storage(包括`localStorage`和`sessionStorage`)提供了比传统cookies更强大且安全的数据存储解决方案,使得应用程序可以在本地保存用户数据,比如用户偏好、游戏进度等。同时,`WebSocket`协议...

Global site tag (gtag.js) - Google Analytics