本地存储

本地存储的特征：

数据存储到用户的浏览器中
设置和读取都比较方便页面刷新时也不会丢失数据
容量比较大 sessionStorage约5M、localStroage约20M
只能存储字符串因此可以将对象JSON.stringify()编码后存储

1.sessionStorage(会话存储)

生命周期为关闭浏览器窗口
在同一页面下数据可以共享
以键值对的形式存储使用

//存储数据
sessionStroage.setItem(key,value)
//获取数据
sessionStroage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//删除所有数据(慎用！)
sessionStorage.clear()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>let ipt = document.querySelector('input')let set = document.querySelector('.set')let get = document.querySelector('.get')let remove = document.querySelector('.remove')let del = document.querySelector('.del')set.addEventListener('click',function () {//当我们点击了之后 就可以把表单里面的值存储起来let val = ipt.valuesessionStorage.setItem('name',val)sessionStorage.setItem('pwd',val)})get.addEventListener('click',function () {//当我们点击了之后 就可以把表单里面的值获console.log(sessionStorage.getItem('name'))})remove.addEventListener('click',function () {//当我们点击了之后 就可以把删除某个表单值sessionStorage.removeItem('name')})del.addEventListener('click',function () {//当我们点击了之后 就可以清除所有sessionStorage.clear()})</script>
</body>
</html>

2.localStorage(本地存储)

生命周期永久生效除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

//存储数据
localStroage.setItem(key,value)
//获取数据
localStroage.getItem(key)
//删除数据
localStorage.removeItem(key)
//删除所有数据(慎用！)
localStorage.clear()

案例：记住用户名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="username"> <input type="checkbox" id="remember"> 记住用户名
<script>let username = document.querySelector('#username')let remember = document.querySelector('#remember')if(localStorage.getItem('username')){username.value = localStorage.getItem('username')remember.checked = true}remember.addEventListener('change',function () {if(this.checked){localStorage.setItem('username',username.value)}else{localStorage.removeItem('username')}})
</script>
</body>
</html>

本地存储Storage相关推荐

html5客户端本地存储之sessionStorage及storage事件
首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)> sessionStorage和上文中提到的localStorage非常 ...
html5 本地存储Web Storage
在过去本地存储数据基本都是使用cookies保存一些简单的数据,使用cookies存储永久数据存在以下几个问题: 1.cookies的大小被限制在4KB: 2.cookies是随HTTP事务一起发送的 ...
（五）HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
ionic android 本地存储,ionic2/3本地数据存储storage
ionic2开始storage默认使用的是IndexedDB,而不是LocalStorage 存储存储是存储键/值对和JSON对象的简单方法.存储使用下面的各种存储引擎,根据平台选择最佳的存储引擎. ...
HTML5 本地存储 Web Storage
Web Storage Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持, 在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤 ...
本地存储(Local Storage) 和会话存储(Session Storage)
我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和会话存储(Session Storage)有一个清晰的认识. 目录前提知识范例示例1:将键值对 ...
本地存储Cookie、Storage、indexDB、ServiceWork离线访问网站
在日常开发中,开发者用得最多的大概是前三种吧,cookie.Session/Local,对后两种运用的较少,话不多少,直接正文: cookie cookie是客户端的解决方案,最早是网景公司的前雇员L ...
chrome拓展插件开发中使用chrome.storage本地存储
一.描述在扩展程序中本地存储数据可以通过 chrome.storage API 实现,和 web 中的 localstorage 在某些方面是有区别的,chrome.storage 已经做了优化. ...

本地存储Storage

本地存储

1.sessionStorage(会话存储)

2.localStorage(本地存储)

案例：记住用户名

本地存储Storage相关推荐

最新文章

热门文章