HTML5的LocalStorage和sessionStorage的使用 -缓存
原文地址:https://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
一、区别
HTML5 提供了两种在客户端存储数据的新方法:
- localStorage - 没有时间限制的持久的数据存储,只要你不主动删除可以想存多久存多久。
- sessionStorage - 针对一个 session 的数据存储,这些数据只有在同一个会话中的页面才能访问,当会话结束后数据也随之销毁(例如你在网页上存储一些数据后关闭网页再重新打开,存储的数据就没有了)。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
二、浏览器支持情况
浏览器的支持除了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都具有相同的操作方法,例如setItem、getItem、removeItem、clear等。
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();
写了一个简单的小例子供大家参考
<!DOCTYPE html> <input id="inpt" type="text" value="请输入内容" /> <script type="text/javascript"> //sessionStorage //localstorage |
转载于:https://www.cnblogs.com/jinsuo/p/10637015.html
HTML5的LocalStorage和sessionStorage的使用 -缓存相关推荐
- html5 localstorage 生命周期,cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式...
写在前面: 前端开发的供个到效近一项消果近一项消果近一项消果近时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstor ...
- 缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用
三种缓存方案coolKie.localStorage.sessionStorage cookie cookie是小甜饼的意思,顾名思义,cookie确实非常小,他的大小限制在4KB左右. 他的主要用途 ...
- 前端cookie、localStorage、sessionStorage缓存技术总结
前端cookie.localStorage.sessionStorage缓存技术总结 转载自:https://www.cnblogs.com/belove8013/p/8134067.html 1.C ...
- 2.javascript之缓存 localStorage 和sessionStorage之间的区别
2018-08-04 前言 今天做项目的时候遇到了这个问题,用户登录成功之后如何改变将登录的链接切换为用户名 解决方案:使用了sessionstorage缓存 和js的onload加载事件 用户登录成 ...
- cookie html5,HTML5——存储(cookie、localStorage、sessionStorage)的区别
cookie 本来用于客户端和服务端通信, 但是因为它有本地存储的功能,于是被"借用"了. 使用方法 document.cookie 获取和修改即可 缺点 存储量太少,只有4kb ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- js本地缓存-localStorage、sessionStorage
1.localStorage 持久化的本地储存,除非主动删除数据,否则数据是永远不会过期的.关闭页面仍然存在此数据 localStorage.setItem('username','zhangsan' ...
- 谷歌浏览器清缓存会把localStorage和sessionStorage都清空
谷歌浏览器通过这种方式清缓存会把localStorage和sessionStorage都清空,亲测.
最新文章
- 在?三缺一,来斗个地主——肝个斗地主案例(java)
- 人脸识别翼闸使用规范_人行通道闸如何搭配人脸识别使用
- python 修改模板对象的属性_django小技巧之html模板中调用对象属性或对象的方法...
- Chapter 4 Invitations——25
- linux网卡ip自动启动不了怎么办,Linux杂谈:解决配置静态ip后eth0网卡启动不了的问题...
- 矩池云利用ipykernel为JupyterLab添加kernel以及展示出来
- ERP项目实施记录08
- 《淘宝网开店 拍摄 修图 设计 装修 实战150招》一一1.15 如何掌握拍摄方向
- WEB应用安全解决方案测试验证
- 基于matlab的信号与系统实验,基于MATLAB的《信号与系统》实验系统
- MCMC抽样与LDA参数求解
- Chrome主页被恶意篡改
- xp系统禁用wmi服务器,windows xp系统启用WMI服务的方法
- 更改WLAN的IP地址
- 物联网技术可以给养老院带来哪些变化
- Proxifier使用教程
- Matlab 字符串时间戳转化为数值(以秒或毫秒为单位)
- vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新)
- python培训网络班报名
- 房友一直显示连接服务器,房友中介连接服务器设置
热门文章
- 中国电子学会scratch等级考试三级
- 小学奥数 7647 余数相同问题 python
- 判断作弊 牛客 编程_牛客企业服务产品-新功能速递-第5期
- 基于Matlab的LDPC码性能研究毕业设计(含源文件)
- Wireshark文档阅读笔记-WebSocket协议基本概念
- MySQL笔记-解决Can't connect to local MySQL server through socket '/xx/xx/mysql.sock' (111)及(2)
- VS加快程序编译速度——以VS2013为例
- Qt|OpenGL学习笔记-绕X轴、Y轴、以及XY轴旋转的四边体
- android 返回销毁活动,android返回活动时会被销毁并且不会恢复
- mysql++pc客户端_Mysql超详细安装配置+客户端连接