接下来就要将本地存储啦,讲完就快到jQuery了,加油!还有一百多节(?)
本地存储
目标:
本地存储特性
- 数据存储在用户浏览器中
- 设置,读取方便,甚至页面刷新不丢失数据
- 容量较大,sessionStorage约5M,localStorage约20M.
- 只能存储字符串,可以将对象JSON.stringify()编码后存储(后面会学)
window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一窗口(页面)下数据可以共享
- 以键值对的形式存储使用
存储数据:
sessionStorage.setItem(key, value)
假设现在我想将填入的数据储存下来
代码的写法;
我们只要点进网页中按下F12
当然不止存储数据,也可以做别的操作
获取数据:
session.Storage.getItem(key)
删除数据:
sessionStorage.removeItem(key)
删除所有数据:
sessionStorage.clear()
window.localStorage
- 声明周期永久有效,除非手动删除,否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
它的操作和前面的是一样的
存储数据:
localStorage.setItem(key, value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
删除所有数据:
localStorage.clear()
记住用户名案例
只要我们选中"记住用户名"的勾选框,就能将我们的用户名存储在本地,一遍下次使用.
我们用之前的文件写过存储数据的操作:
因为用的是localStorage的方法,所以就算换了个窗口,数据也是存在的,只要是在同一个浏览器下.
我们现在存一个试试,看一下效果
当我刷新这个页面时,用户名就自动填充进来了.
当我取消勾选以后再刷新,输入框就不会自动填充了
下一节开始就是jQuery了.
