【JavaScript】本地存储localStorage

在学习jQuery制作todolist项目时用到了js的本地存储，发现好像没学，因此记录下学习过程

一.什么是js本地存储？

localStorage会可以将第一次请求的数据之间存储到本地，这个相当于一个大小5M的针对前段页面的数据库

二.具体使用方式

// 1.通过localStorage 没有时间限制的数据存储
var date = ['数据01', '数据02', '数据03'];
localStorage.setItem('dateName', date); //存入 参数:1.调用的值 2.存入的数据
console.log(localStorage.getItem('dateName')); //输出
// 数据01,数据02,数据03
// 注意是以字符串形式存储

// 2.清空本地存储
localStorage.clear();

// 3.删除特定键值对的本地存储数据
localStorage.removeItem('dateName');

可以通过谷歌浏览器查看本地存储数据:

三:转JSON数据方法

JSON 是用于存储和传输数据的格式

• JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
• JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

在上面可以知道,存储在本地的数据是以字符串形式存储的,但在实际中往往需要存储对象等复杂数据类型,因此就需要通过以下方法先转换为JSON数据字符串,再进行本地存储,再进行JSON数据转化为复杂数据类型(Object)

// date是复杂数据类型,如果直接通过localStorage方法存储会转换为字符串
var date = { a: '数据01', b: '数据02', c: '数据03' };
// 先转换为JSON字符串
date = JSON.stringify(date);
localStorage.setItem("dateName", date);

// 再通过JSON字符串转化为JSON对象
date = JSON.parse(localStorage.getItem('dateName'));
console.log(date);