说明

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，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. selenium元素和浏览器操作

    click和clear from selenium.webdriver.support.wait import WebDriverWait import time browser = webdrive ...

  2. ELK学习实验001：Elastic Stack简介

    1 背景介绍 在我们日常生活中,我们经常需要回顾以前发生的一些事情:或者,当出现了一些问题的时候,可以从某些地方去查找原因,寻找发生问题的痕迹.无可避免需要用到文字的.图像的等等不同形式的记录.用计算 ...

  3. $Noip2013/Luogu1970$ 花匠 $dp$+思维

    $Luogu$ $Sol$ 和$Poj1037\ A\ Decorative\ Fence$好像吖. $f[i][0/1]$表示前$i$个数,且选了第$i$个数,这个数相对于上一个数是下降(上升)的, ...

  4. 【C++】CCFCSP201803-1跳一跳

    // // main.cpp // CCFCSP20180318_1_跳一跳 // // Created by T.P on 2018/3/23. // Copyright © 2018年 T.P. ...

  5. Wireshark抓包，带你快速入门

    前言 关于抓包我们平时使用的最多的可能就是Chrome浏览器自带的Network面板了(浏览器上F12就会弹出来).另外还有一大部分人使用Fiddler,Fiddler也是一款非常优秀的抓包工具.但是 ...

  6. 【Python3爬虫】反反爬之解决前端反调试问题

    一.前言 在我们爬取某些网站的时候,会想要打开 DevTools 查看元素或者抓包分析,但按下 F12 的时候,却出现了下面这一幕: 此时网页暂停加载,也就没法运行代码了,直接中断掉了,难道这就能阻止 ...

  7. Redis系列之----Redis的数据类型及使用场景

       Redis是一个开源的.高性能的.基于键值对的缓存与存储系统,能够提供多种不同的键值数据类型来适应不同场景下的缓存和存储需求.    Redis中所有的数据都存储在内存中,因此读写速度非常快,相 ...

  8. Cesium本地影像与地形服务发布

    目录 1 数据切片 1.1 影像处理 1.2 地形处理 2 Web应用服务器安装与配置 2.1 Tomcat安装及配置 2.2 IIS安装及配置 3 本地影像与地形服务发布 4 参考资料 @(目录) ...

  9. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

  10. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...