[TOC] # 1.本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经 常性在本地存储大量的数据, HTML 5规范提出了相关解决方案。 # 本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,sessionStorage约5M、localStorage约20M 4、只能存储字符串,可以将对象JSON.stringify() 编码后存储 # window.sessionStorage （页面关闭就没了） 1.生命周期为关闭浏览器窗口 2、在同一个窗口(页面)下数据可以共享 3.以键值对的形式存储使用 ## 存储数据: ~~~ sessionStorage.setltem(key, value) ('我们取的名字',获取的名) ~~~  ## 获取数据: ~~~ sessionStorage.getltem(key) ~~~ ## 删除数据: ~~~ sessionStorage.removeltem(key) ~~~ ## 删除所有数据: ~~~ sessionStorage.clear() ~~~ ## 演示 html  获取元素  js    # 3\. window.localStorage （生命周期永久生效） 1.生命周期永久生效,除非手动删除否则关闭页面也会存在 2、可以多窗口(页面)共享(同-浏览器可以共享) 3.以键值对的形式存储使用 ## 存储数据: ~~~ localStorage.setltem(key, value) ~~~ ## 获取数据: ~~~ localStorage.getltem(key) ~~~ ## 删除数据: ~~~ localStorage.removeltem(key) ~~~ ## 删除所有数据: ~~~ localStorage.clear() ~~~   ## 其他页面也可以引用  # 6案例: 记住用户名 （页面开发有点用） 如果勾选记住用户名，下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名  ## 案例分析 ~~~ ①把数据存起来,用到本地存储 ②关闭页面,也可以显示用户名,所以用到localStorage ③打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框 ④当复选框发生改变的时候change事件 ⑤如果勾选,就存储,否则就移除 ~~~