本地存储

移动端
1.1k 词
本地存储

本地存储#

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性地在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性#

  1. 数据存储在用户浏览器中
  2. 设置、读取方便、甚至页面刷新不丢失数据
  3. 容量较大， sessionStorage 约5M， localStorage 约20M
  4. 只能存储字符串，可以将对象JSON.stringify()编码后存储

window.sessionStorage#

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口（页面）下数据可以共享
  3. 以键值对的形式存储使用

存储数据：#

                    
javascript

                    sessionStorage.setItem(key,value)

获取数据：#

                    
javascript

                    sessionStorage.getItem(key)

删除数据：#

                    
javascript

                    sessionStorage.removeItem(key)

删除所有数据：#

                    
javascript

                    sessionStorage.clear()

window.localStorage#

  1. 生命周期永久生效，除非手动删除，否则关闭页面也会存在
  2. 可以 多窗口（页面） 共享（同一浏览器可以共享）
  3. 以键值对的形式存储使用
  4. 使用方法与sessionStorage相同

存储数据：#

                    
javascript

                    localStorage.setItem(key,value)

获取数据：#

                    
javascript

                    localStorage.getItem(key)

删除数据：#

                    
javascript

                    localStorage.removeItem(key)

删除所有数据：#

                    
javascript

                    localStorage.clear()

存储复杂数据类型#

需要将复杂数据类型转换为JSON字符串，再存储到本地

而从本地取得的复杂数据类型的JSON字符串，需要重新转为对象方可使用

                    
JavaScript

                    // 对象->JSON字符串
                    JSON.stringify(复杂数据类型)
                    // JSON字符串->对象
                    JSON.parse(JSON字符串)

JSON对象：属性和值都有双引号

案例：记住用户名#

若勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登陆的用户名

分析

  1. 把数据存起来，用到本地存储
  2. 关闭页面，也可以显示用户名，所以用到localStorage
  3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
  4. 当复选框发生改变时change事件
  5. 若勾选，就存储，否则就移除