本地存储

@LocalStorage

Feature

.window 的全局函数

.以值对 key-value pairs 的形式存储在本地

.持久化保存，除非用户主动清除

.读取方便

.存储容量大，约20MB

.不会出现在请求头中，可以节省带宽

.不会被网络爬虫抓取

.不同浏览器保存的数据不能共享

.存的数据都是字符串 String！！！

.如果数据不存在，返回null；如果存在返回字符串[黑色]

Method

常用方法
类别	说明
保存	localStorage.setItem(key,value)
获取	localStorage.getItem(key)
删除	localStorage.removeItem(key)
清空	localStorage.clear()

F12 → Application → Storage → Loacal Storage

浏览器调试时，console.log 的文字的颜色：黑色为字符串；蓝色为数字

可以根据索引获取：localStorage.key(n)

Usage

String

localStorage.setItem('str', 'male')

let str = localStorage.getItem('str')
console.log(str);

Number

localStorage.setItem('num', 2114)

let num = localStorage.getItem('num')
console.log(num);
//类型转换为数值型[蓝色]
console.log(Number(num));

Array

.直接存储会被转化为字符串

let arr = [1, 2, 3, 4, 5];
let res;
console.log('before set: ', arr);
localStorage.setItem('arr', arr)
res = localStorage.getItem('arr')
console.log('after get ', res);

.存储时，使用 JSON.stringify 将数据序列化处理后再保存，否则无法还原

localStorage.setItem('arr1', JSON.stringify(arr));

.获取时，使用 JSON.parse 转换为原始数据类型；如果不解析仍然是字符串

res = JSON.parse(localStorage.getItem('arr1'));
console.log('解析获取：res:', res);

最佳编码体验：如果为 null，则赋值为对应的空值，如空数组

res = JSON.parse(localStorage.getItem('arr1')) || [];

Object

.同数组一样，对象的保存和获取也要处理

.直接存储，查看时，显示为[object Object]

let obj = { name: 'glc' }
//使用JSON.stringify转换
localStorage.setItem('obj', JSON.stringify(obj))
// 使用JSON.parse解析
let obj1 = JSON.parse(localStorage.getItem('obj'))
console.log(obj1);

最佳编码体验：如果为 null，则赋值为空对象

obj1 = JSON.parse(localStorage.getItem('obj')) || {};

Summary & Homework

Summary: 数据的设置和获取默认都是为字符串

如果存储的是数值型数据，获取时应类型转换，如使用 Number() 转换为数字

复合数据类型如数组和对象，保存时应使用 JSON.stringify() 序列化处理；获取时应使用 JSON.parse() 解析；两者要配合使用

不管什么类型的数据，如果不存在，返回为 null
Homework: 完成以上操作，体会本地存储的特点

体会保存数组对象 [{}] 的基本操作，并思考和其它数据类型的异同

创建一个登陆表单，实现保存用户名和密码的操作，以便于下次直接登陆