`

html5的sessionStorage和localStorage应用

阅读更多

一,sessionStorage和localStorage之间的区别

       首先,Html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

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

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

 

二,web storage和cookie的区别

       web storage和cookie都可以在浏览器端存储数据,但是cookie存储数据是有大小限制的(4KB左右的数据),而且同一域名下存储cookie的个数也是有限制的(不同浏览器限制个数不同,IE一般限制为20个左右),由于每次与服务端交互,都要带上该域名下所有的cookie信息,无疑会增大网络带宽的开销。

       而web storage只是在浏览器端存储数据,没有上述限制因素。

 

三,web storage的使用

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

#localStorage常用操作
window.localStorage.setItem(key,value);
window.localStorage.getItem(key);
window.localStorage.removeItem(key);
window.localStorage.clear();//清除所有localStorage数据

#sessionStorage常用操作
window.sessionStorage.setItem(key,value);
window.sessionStorage.getItem(key);
window.sessionStorage.removeItem(key);
window.sessionStorage.clear();//清除所有sessionStorage数据

 

分享到:
评论

相关推荐

    cookies,sessionStorage 和 localStorage 的区别1

    cookies、sessionStorage 和 localStorage 是三种不同的浏览器端存储机制,每种机制都有其特点和应用场景。了解这些机制的区别和应用场景可以帮助开发者更好地选择合适的存储机制,以提高页面加载速度和用户体验。

    Vue2原型挂载sessionStorage、localStorage、element弹窗

    在这个主题中,“Vue2原型挂载sessionStorage、localStorage、element弹窗”指的是在Vue2应用中扩展原型链,以便更方便地访问和操作浏览器的本地存储(localStorage)和会话存储(sessionStorage),同时结合Element...

    HTMl5的存储方式sessionStorage和localStorage详解

    HTML5的Web Storage引入了两种新的本地数据存储方式:`sessionStorage`和`localStorage`,它们解决了传统Cookie在存储容量和性能上的限制,为Web应用提供了更高效的数据管理能力。 `sessionStorage`主要用于存储...

    H5 localStorage 和 sessionStorage 对json的处理方式

    在HTML5中,localStorage和sessionStorage是Web存储的两种机制,它们允许网页在用户的浏览器上保存数据,从而实现数据持久化。这两个API都是基于键值对(key-value pairs)的存储方式,对于JSON(JavaScript Object ...

    一种更好的方法来使用localStorage和sessionStorage

    这两个API是HTML5引入的,极大地扩展了Web应用程序的能力,使得离线应用和状态管理成为可能。本文将深入探讨如何更有效地利用它们,以及一些最佳实践。 首先,我们来理解一下`localStorage`和`sessionStorage`的...

    【温故而知新】HTML5存储localStorage:sessionStorage.md

    - **离线和存储功能**:HTML5提供了本地存储的能力,包括`localStorage`和`sessionStorage`两种存储方式。这两种存储方式使得开发者能够在用户的设备上存储数据,即使在网络连接不稳定的情况下也能提供良好的用户...

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

    Web Storage分为两种类型:localStorage和sessionStorage。 1. localStorage: localStorage提供持久化的本地存储,数据在用户关闭浏览器后再打开仍可保留。其主要操作方法包括: - `setItem(key, value)`:用于...

    HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

    使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,...

    一个本地存储工具控制localStorage和sessionStorage

    `localStorage`和`sessionStorage`是HTML5引入的两种本地存储机制,它们允许Web应用在用户的浏览器上保存数据,无需每次页面刷新或关闭后都重新获取。本文将详细讲解这个名为“本地存储工具”的项目,它提供了一个...

    突袭HTML5之Javascript API扩展3—本地存储全新体验

    HTML5的Javascript API扩展在本地存储方面带来了全新的体验,解决了传统方法中存在的一系列问题。...同时,通过合理使用sessionStorage和localStorage,开发者可以创建更加智能且用户友好的应用程序。

    Html5 资料

    在本文中,我们将重点关注HTML5中的本地数据存储技术,包括sessionStorage、localStorage和cookie,以及它们与服务器端数据存储的区别。 首先,HTML5 Web Storage API 提供了sessionStorage和localStorage两个接口...

    H5打包成安卓app后,js的localstorage失效报错.pdf

    `localStorage`是HTML5引入的一种本地存储机制,允许Web应用在用户的浏览器中存储大量数据,相比于传统的Cookie,`localStorage`提供了更大的存储空间(通常为5MB),并且数据不会随着HTTP请求发送,从而降低了网络...

    HTML5实现的日志管理系统

    在这个“HTML5实现的日志管理系统”中,我们主要关注两个关键特性:sessionStorage和localStorage,以及利用canvas进行图形绘制。 1. sessionStorage和localStorage: - sessionStorage:这个API用于在浏览器会话...

    localstorage和sessionstorage使用记录(推荐)

    在Web开发中,数据持久化是一个重要的需求,而`localStorage`和`sessionStorage`就是HTML5引入的两种本地存储机制,它们允许开发者在用户的浏览器中保存数据,即使用户关闭并重新打开浏览器,这些数据仍然存在。...

    HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    总之,HTML5的localStorage和sessionStorage为Web应用提供了离线存储的能力,极大地增强了Web应用的功能和用户体验。开发者应熟悉其基本用法,掌握异常处理和遍历操作,以便在实际项目中灵活运用。

    HTML5书籍(HTML5高级程序设计.pdf+深入HTML5应用开发.pdf)

    3. **Web Storage**:包括localStorage和sessionStorage,它们提供了比传统cookies更强大的数据存储能力。 4. **Web Workers与Web Socket**:Web Workers允许在后台执行复杂计算,提高页面响应速度;Web Socket则...

    html5中的Web Storage

    HTML5中的Web Storage是网页应用用来在客户端存储数据的重要特性,它主要分为两种类型:sessionStorage和localStorage。这两种存储方式都是为了替代传统Cookie的局限性,提供更大的存储空间和更高效的本地数据管理。...

    凯迪拉克HTML5轻应用

    3. **本地存储(Web Storage)**:包括SessionStorage和LocalStorage,用于在用户关闭浏览器后仍能保存数据,为用户提供更持久化的体验。 4. **Web App Manifest**:定义了应用的元数据,如应用名称、图标、启动...

Global site tag (gtag.js) - Google Analytics