localStorage介绍和使用

localStorage介绍和使用

分享一句话：

保持学习的习惯，保持对世界的好奇心，保持独立思考的能力。------李宇春

正文开始!!!

---

一、介绍

在HTMl5中新添加的特性，主要用于本地存储。

二、优点和缺点

1.优点

解决了cookie存储空间(4k)问题不足问题，localStorage在一般浏览器中存储空间在5M左右。

2.缺点

1、浏览器的大小不统一，IE8以上的IE浏览器版本才能支持；

2、所有的浏览器限定为String类型，JSON类型需要转换；

3、localStorage在浏览器的隐私模式里不可读取；

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；

5、localStorage不能被爬虫抓取到。

三、与sessionStorage的区别

localStorage可以做到永久存储，而sessionStorage只在单个会话中存储，当会话结束后，存储的键值就被清除了

四、localStorage的使用

1.浏览器能否支持localStorage

代码：

if(!window.localStorage){
    console.log("浏览器不支持localstorage");
}else{
    console.log("浏览器支持localstorage");
}

运行结果：

2.localStorage存值

代码：

let storage = window.localStorage;
//方式一
storage.name = "qiqi";
//方式二
storage['sex'] = "女"
//方式三
storage.setItem("age",7);

运行结果：

3.localStorage取值

代码：

//方式一
console.log(storage.name);//qiqi
//方式二
console.log(storage['sex']);//女
//方式三
console.log(storage.getItem(age));//7

运行结果：

4.localstorage改值

代码：

storage.name = '琪琪';
storage['sex'] = '女孩子';
storage.setItem('age',18);

运行结果：

5.删除本地存储的某个值

例如：删除已存的"sex"的属性和值。

代码：

storage.removeItem("sex");
console.log(storage.sex);//undefined

运行结果：

6.删除所以本地存储

代码：

storage.clear();

运行结果：

Yeah, it’s done. Thanks for watching~~