本地存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性的在本地存储大量的数据,HTML5规范提出了相关解决方案
本地存储特性
-
数据存储在用户浏览器中
-
设置、读取方便、甚至页面刷新不丢失数据
-
容量较大、sessionStorage约5M,localStorage约20M
-
只能存储字符串,可以将对象JSON.stringify()编码后储存
-
JSON.stringify():将一个 JavaScript 对象或值转换为 JSON 字符串
-
JSON.parse():将JSON格式字符串转换为js对象(属性名没有双引号)
Window.sessionStorage
-
生命周期为关闭浏览器窗口
-
在同一个窗口(页面)下数据可以共享
-
以键值对的形式存储使用
存储数据
sessionStorage.setItem(key,value)
获取数据
sessionStorage.getItem(key)
删除数据
sessionStorage.removeItem(key)
清空所有数据
sessionStorage.clear()
<!-- 在f12的Application中的Storage查看 --> <input type="text"> <button class="set"></button> <button class="get"></button> <button class="remove"></button> <button class="clear"></button> <script> var ipt = document.querySelector('input'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var clear = document.querySelector('.clear'); set.addEventListener('click', function () { // 点击之后可以把表单里的值存储起来 var val = ipt.value; sessionStorage.setItem('uname', val); }); get.addEventListener('click', function () { // 点击之后可以把表单里的值获取过来 sessionStorage.getItem('uname'); }); remove.addEventListener('click', function () { sessionStorage.removeItem('uname'); }); clear.addEventListener('click', function () { sessionStorage.clear(); }); </script>
Window.localStorage
-
生命周期永久生效,除非手动删除,否则关闭页面也会存在
-
可以多窗口(页面)共享(统一浏览器可以共享)
-
以键值对形式存储使用
存储数据
localStorage.setItem(key,value)
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
清空所有数据
localStorage.clear()