浏览器的localStorage和sessionStorage

本地存储

• 数据都存储在用户的浏览器里
• 读取方便
• sessionStorage 存 5M
• localStorage 存 20 M
• 只能存字符串格式数据
• key ：value

sessionStorage

• 生命周期： 关闭浏览器窗口数据就没了
• 数据共享： 只有在同一个窗口(页面)下数据可以共享
• 存储5M
• 语法：
  • 存储数据：sessionStorage.setItem('key', 'value');
    • 相同键名会覆盖内容
  • 获取数据：sessionStorage.getitem('key');
  • 删除数据：sessionStorage.removeItem('key')
  • 清空数据: sessionStorage.clear( )

localStorage

• 生命周期：永久生效，只要不手动清除，一直存在
• 数据共享：同一浏览器 同源（协议相同、端口号相同、域名相同）页面共享
• 存储20M
• 语法：
  • 存储数据：localStorage.setItem('key', 'value');
    • 相同键名会覆盖内容
  • 获取数据：localStorage.getitem('key');
  • 删除数据：localStorage.removeItem('key');
  • 清空数据: localStorage.clear();

JSON

• 功能：能将复杂数据转换成JSON格式的字符串、能将转换成JSON格式的字符串转换成原来复杂类型

• 有一定格式的字符串

• 特点：

  • 键名必须用双引号包起来
  • 字符串也必须用双引号包起来
  • 可以存数字和字符串

• 语法;

  • 将复杂数据类型转换成JSON格式字符串

    • JSON.stringify（复杂数据类型）

  • 将JSON格式的数据转换回原来数据类型

    • JSON.parse(JSON格式的数据)

  • 数组遍历

    arr.forEach(function (element, index) {
      console.log(element);
      console.log(index);
    })
    

常用键盘事件

• 键盘按下
  • keydown 按下不抬起就一直触发
• 键盘抬起
  • keyup 抬起就触发一次