什么是localstorage?
HTML5新特性，特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，在不同的浏览器中localStorage会有差别。
localStorage的优势？
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，比cookie可以节约带宽
localStorage的局限？
1、各个浏览器存储大小不统一，在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的区别?
就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候(比如浏览器页面关闭)，sessionStorage中的键值对会被清空。
localstorage的使用？
这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
一：关于localstorage的存储,这里出了三种存储方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>存入localstorage</title>
</head>
<body>
<div>
<a href="index2.html">点击进入index2页面</a>
</div>
<script src="../jquery-3.0.0.min.js"></script>
<script>
//获取到localStorage这个对象-->
var storage=window.localStorage;
/* // 添加localstorage第一种方法
storage.number1='我是localstorage的第一.1条数据';
storage.number2='我是localstorage的第二.2条数据';
storage.number3='我是localstorage的第三.3条数据';*/
/* // 添加localstorage第二种方法
storage['number1']='我是localstorage的第一.4条数据';
storage['number2']='我是localstorage的第二.5条数据';
storage['number3']='我是localstorage的第三.6条数据';*/
// 添加localstorage第三种方法
storage.setItem('number1','我是localstorage的第一.7条数据');
storage.setItem('number2','我是localstorage的第二.8条数据');
storage.setItem('number3','我是localstorage的第三.9条数据');
// 输出这个对象的所有内容
console.log(storage)
</script>
</body>
</html>
二：关于localstorage提取,这里出了三种提取方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取出localstorage</title>
</head>
<body>
<div>
<span>控制台查看localstorage取值</span>
</div>
<p></p>
<script src="../jquery-3.0.0.min.js"></script>
<script>
//获取到localStorage这个对象-->
var storage=window.localStorage;
console.log(storage);
/* //提取localstorage的第一种方法
var lenOne=storage.number1;
var lenTwo=storage.number2;
var lenThree=storage.number3;*/
/* //提取localstorage的第二种方法
var lenOne=storage['number1'];
var lenTwo=storage['number2'];
var lenThree=storage['number3'];
*/
//提取localstorage的第三种方法
var lenOne=storage.getItem('number1');
var lenTwo=storage.getItem('number2');
var lenThree=storage.getItem('number3');
console.log(lenOne);
console.log(lenTwo);
console.log(lenThree);
</script>
</body>
</html>
三：关于localstorage删除
清除全部的localstorage
storage.clear()
删除单个localstorage
storage.removeItem('number1')
三：关于localstorage修改
storage.setItem('number1','55555')
网友评论