JS-WebAPIs-本地存储(五)

• 本地存储介绍

  • 以前我们页面写的数据一刷新页面就没有了,是不是?
  • 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常 性在本地存储大量的数据,HTML5规范提出了相关解决方案。
  • 1、数据存储在用户浏览器
  • 2、设置、读取方便、甚至页面刷新不丢失数据
  • 3、容量较大,sessionStorage和localStorage约 5M 左右

• 本地存储分类

  • localStorage

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在

特性:

Ø 可以多窗口(页面)共享(同一浏览器可以共享)

Ø 以键值对的形式存储使用

语法:

JS-WebAPIs-本地存储(五)_第1张图片

浏览器查看本地数据: 

JS-WebAPIs-本地存储(五)_第2张图片

  •  sessionStorage

特性:

Ø 生命周期为关闭浏览器窗口
Ø 在同一个窗口(页面)下数据可以共享
Ø 以键值对的形式存储使用
Ø
用法跟localStorage 基本相同

1. localStorage 作用是什么?

  • 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在

2. localStorage 存储,获取,删除的语法是什么?

  • 存储:localStorage.setItem(key, value)
  • 获取:localStorage.getItem(key)
  • 删除:localStorage.removeItem(key)

• 存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.

JS-WebAPIs-本地存储(五)_第3张图片

JS-WebAPIs-本地存储(五)_第4张图片 保存复杂数据

解决:需要将复杂数据类型转换成JSON字符串,在存储到本地 

语法:JSON.stringify(复杂数据类型)

JS-WebAPIs-本地存储(五)_第5张图片

  • 将复杂数据转换成JSON字符串 存储 本地存储中 

JS-WebAPIs-本地存储(五)_第6张图片

获取数据 

解决:把取出来的字符串转换为对象

语法:JSON.parse(JSON字符串)

  • 将JSON字符串转换成对象 

JS-WebAPIs-本地存储(五)_第7张图片

数组中map方法 迭代数组 

JS-WebAPIs-本地存储(五)_第8张图片

JS-WebAPIs-本地存储(五)_第9张图片

数组中join方法

JS-WebAPIs-本地存储(五)_第10张图片

综合案例:

学生就业信息表 

需求: 录入学生信息,页面刷新数据不丢失

模块分析:
①:新增模块, 输入学生信息,数据会存储到本地存储中
②:渲染模块,数据会渲染到页面中
③:删除模块,点击删除按钮,会删除对应的数据

JS-WebAPIs-本地存储(五)_第11张图片





  
  
  
  学生就业统计表
  
  



  

学生就业统计表

共有数据0
ID 姓名 年龄 性别 薪资 就业城市 录入时间 操作

你可能感兴趣的:(js,javascript,开发语言,ecmascript)