HTML5 Web存储-localStorage、sessionStorage
程序员文章站
2022-06-10 09:31:36
...
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速.
这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
存储方式
键/值对通常以字符串存储
localStorage.setItem('test',{name:123})
localStorage.getItem('test')// "[object Object]"
localStorage.setItem('test',[123,1,3])
localStorage.getItem('test')// "123,1,3"
api
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 删除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
localStorage
- 数据没有时间限制,需手动删除
- 打开多个窗口共享同一数据
sessionStorage
- 当用户关闭浏览器窗口后,数据会被删除。(刷新不会清除)
- 不同窗口的同一页面数据不共享
推荐阅读
-
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
-
HTMl5的存储方式sessionStorage和localStorage详解
-
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
-
本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
-
在html5中,使用localStorage存储的数据放在哪个文件里?
-
解析HTML5中的新功能本地存储localStorage
-
HTML5开发学习(3):本地存储之Web Sql Database(附源码)
-
HTML5本地存储 Web Storage
-
浅谈浏览器存储(cookie、localStorage、sessionStorage)
-
HTML5 本地存储 localStorage SessionStorage StorageListener- 2