说明

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。我们可以使用localStorage、sessionStorage进行本地的存储。其它的还有WebSQL、IndexDB存储。

兼容性

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储，IE7及IE7之前都不支持web存储

特性

1、设置、读取方便、页面刷新不丢失数据

2、容量较大，sessionStorage约5M、localStorage约20M

3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

4、取出JSON.stringify() 编码的数据，需要使用 JSON.parse()解析

sessionStorage

1、sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

2、浏览器页面关闭后，数据会丢失。就算页面重新打开，数据也不会恢复。

3、不能多个窗口共享

localStorage

1、localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

2、可以多窗口（页面）共享（同一浏览器可以共享）。

3、就算窗口关闭了，数据会暂时消失，当页面重新打开之后，数据就恢复了。

相关API

它们都具有相同的方法

1、setItem(key, value) 设置存储内容

2、getItem(key) 读取存储内容

3、removeItem(key) 删除键值为key的存储内容

4、clear() 清空所有存储内容

5、key(index) 得到某个索引的key值

相关示例

这里演示的是sessionStorage，localStorage也是如此

<body>

        <input type="text" id="text">

	<button id="btn1">存储数据</button>

	<button id="btn2">获取数据</button>

	<button id="btn3">删除数据</button>

	<button id="btn4">获取某个key值</button>

</body>

<script>

	var text = document.getElementById('text')

	var btn1 = document.getElementById('btn1')

	var btn2 = document.getElementById('btn2')

	var btn3 = document.getElementById('btn3')

	var btn4 = document.getElementById('btn4')

	//存储数据

	var inp = ''

	btn1.onclick = function(){

		inp = text.value

		//存储数据

		sessionStorage.setItem('uname', inp)

	}

	//获取数据

	btn2.onclick = function(){

		//获取数据

		var uname = sessionStorage.getItem('uname')

		alert(uname)

	}

	//删除数据

	btn3.onclick = function(){

		//删除所有

		//sessionStorage.clear()

		sessionStorage.removeItem('uname')

	}

	//获取第 0 个索引的key值

	btn4.onclick = function(){

		var key = sessionStorage.key(0)

		alert(key)

	}

特殊

因为它们只能存储字符串，因此当要存储数组、对象等，需要使用JSON.stringify()编码后再存储，取值也需要使用JSON.parse()解析该字符串才能获取相应的数据。

//定义一个对象

var obj = {

    name: '车神-黄杰',

    age:23

}

//保存值

sessionStorage.setItem('info', JSON.stringify(obj))

//获取值

var info = JSON.parse(sessionStorage.getItem('info'))

//输出值

alert(info.name)

注意

因为有兼容性问题，因此在使用时根据自己的需要，判断是否存在兼容性问题，给出友好提示。

if(typeof(Storage)!=="undefined")

{

    // 是的! 支持 localStorage  sessionStorage 对象!

} else {

    // 抱歉! 不支持 web 存储。

}

HTML5的web 存储localStorage、sessionStorage的更多相关文章

  1. HTML5 的web储存: localStorage & sessionStorage

    早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...

  2. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  3. web 存储方式汇总：Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application Cache,Cache Storage

    1 1 1 web 存储方式汇总: 旧的方式: Cookies; Session; Web SQL; 新的方式 HTML5 : Web Storage(LocalStorage ,SessionSto ...

  4. HTML5中Web存储

    HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...

  5. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  6. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  7. Web存储机制—sessionStorage,localStorage使用方法

    Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 W ...

  8. html5的web存储

    在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...

  9. 【html5】Web存储_locaStorage对象的应用

    Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...

随机推荐

  1. react-native-swiper使用的坑

    今天使用引入react-native-swiper组件使用轮播图时,发现报如下错误: Invarint Violation:ViewPagerAndroid has been removed from ...

  2. The third day of Crawler learning

    连续爬取多页数据 分析每一页url的关联找出联系 例如虎扑 第一页:https://voice.hupu.com/nba/1 第二页:https://voice.hupu.com/nba/2 第三页: ...

  3. 跌宕起伏的java帝国史,剖析谷歌甲骨文长达8年的版权战争

    这篇博文是我在B站上发的一个科普java的视频文案整理,本来发过一次了,但是有几种不严谨的地方只能删掉重新发了一下,内容如标题,感兴趣的码农朋友可以观看视频的版本,欢迎提提意见啥的,感谢~https: ...

  4. JSONP Hijackin攻击详解

    JSONP Hijackin的中文意思是JSON劫持,而能产生JSON数据劫持的原因在于前端被跨站攻击了.跨站=跨域,跨域从字面上理解的话,就是指超出了范围.领域.继续追问一下,那超出了什么范围?原来 ...

  5. Python 植物大战僵尸代码实现: 图片加载和显示切换

    游戏介绍以前很火的植物大战僵尸游戏, 本想在网上找个python版本游戏学习下,无奈没有发现比较完整的,那就自己来写一个把.图片资源是从github上下载的,因为图片资源有限,只能实现几种植物和僵尸. ...

  6. 小小知识点（四十一）-based和based on的正确理解

    A-based B<等价于>B based on A<等价于>B on the basis of A,翻译为基于A的B For example: (1) Radar-based ...

  7. 应届生/社招面试最爱问的几道Java基础问题

    本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错 ...

  8. Go 每日一库之 go-flags

    简介 在上一篇文章中,我们介绍了flag库.flag库是用于解析命令行选项的.但是flag有几个缺点: 不显示支持短选项.当然上一篇文章中也提到过可以通过将两个选项共享同一个变量迂回实现,但写起来比较 ...

  9. .NET Core 3 WPF MVVM框架 Prism系列之事件聚合器

    本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的使用事件聚合器实现模块间的通信 一.事件聚合器  在上一篇 .NET Core 3 WPF MVVM框架 Prism系列之模块化 ...

  10. Django3.0.2学习踩坑记

    配置文件settings.py相关: 新增app INSTALLED_APPS = [ 'polls.apps.PollsConfig', # 这个是新增的APP 'django.contrib.ad ...