HTML5客户端数据存储Web Storage——localStorage与sessionStorage
来源:互联网 发布:mac上qq截图快捷键 编辑:程序博客网 时间:2024/05/17 05:17
HTML5提供了在客户端存储数据的新方法Web Storage
类似于HTML4中的Cookie
不过它要强大的多
Cookie
先来简单复习一下之前使用的cookie
cookie存储数据到用户设备上,存储的数据量较小只有4KB
可以通过navigator.cookieEnabled检测是否开启了cookie
- 设置cookie
document.cookie = 'key=value';
- 获取cookie
document.cookie;
- 删除cookie
document.cookie = "key=value;max-age=0";
- 设置max-age存储期限
document.cookie = "key=value;max-age=1000"; // 1000秒
- 设置expires存储期限
- 1
- 2
- 3
- 1
- 2
- 3
- 获取具体cookie值
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
Web Storage
Web Storage又分为两种
localStorage和sessionStorage
它们的区别是:
- localStorage存储的是永久数据,除非手动删除
- sessionStorage存储的是临时数据,窗口关闭就会消失
简单使用
Web Storage只能存储字符串数据
我觉得可以把它们理解为JSON
使用方法都是类似的,已localStorage为例
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
要存储的数据名就是localStorage的属性名
普通的字符串正常存储就可以了
对象数据可以利用JSON.stringify()将其转换为字符串格式
使用的时候再用JSON.parse()转换回对象格式
(如果直接存储对象的话,它会被强制转换为字符串 “[object Object]”)
删除数据直接delete就好
- 1
- 2
- 1
- 2
如果不删除的话,localStorage里面的数据就会一直存在于你的浏览器了
API
localStorage和sessionStorage还提供了简单的API
类似于一个客户端的数据库
(API都是相同的)
常用的有以下几个:
- 保存数据 setItem(key,value)
- 读取数据 getItem(key)
- 删除单个数据 removeItem(key)
- 清空全部数据 clearItem()
- 获取数据索引 key(index)
实例
通过这个,我们可以写个简易的通讯录
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
JavaScript中就是实现这两个函数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
输入姓名和手机添加联系人
然后在下面输入联系人姓名我们可以查找到手机号
当然这个通讯录十分简易了
也可以为它添加显示通讯录全部信息
删除联系人功能等等
cookie与Web Storage区别
最后说说html5的Web Storage和Html4的cookie的区别
阅读全文
0 0
- HTML5客户端数据存储Web Storage——localStorage与sessionStorage
- HTML5客户端数据存储Web Storage——localStorage与sessionStorage
- 【html5】Web Storage本地存储 sessionStorage/localStorage
- HTML5 Web存储数据(localStorage,sessionStorage)
- Web存储——sessionStorage与localStorage
- HTML5 Web存储(localStorage与sessionStorage)
- Web Storage:sessionStorage与localStorage
- Web Storage:sessionStorage与localStorage
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
- HTML5——Web存储API,sessionStorage和localStorage
- HTML5 Web存储 sessionStorage localStorage
- html5中的Web Storage:sessionStorage和localStorage
- html5中的Web Storage(sessionStorage、localStorage)
- 客户端数据存储 localStorage sessionStorage
- 客户端存储——localStorage和sessionStorage
- web存储 localStorage与sessionStorage
- HTML5客户端存储之 LocalStorage 和 SessionStorage
- html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
- Android Studio教程:启动时不自动打开项目
- 我如何从一个异步调用返回响应?
- Linux shell script 1 basic scripts
- Oracle之快速复制表-yellowcong
- 修改kafka_run_class.bat并增加JRE_HOME判断
- HTML5客户端数据存储Web Storage——localStorage与sessionStorage
- Hibernate与 MyBatis的比较
- MySQL性能利器:innotop工具
- replace与replaceAll的区别
- JS实现加密以及cookie保存(不经过后台,直接在页面操作)
- php对象传值、对象克隆
- java 使 用 分 页 分 析 完 数 据 进 行 标 志 修 改 完 成,存在的问题
- solr主从节点数据不一致
- jquery及ui代码提示