一、localStorage和sessionStorage区别
①localStorage
H5 提供了两种在客户端存储数据的新方法：
- localStorage：没有时间限制的数据存储
- sessionStorage：针对一个
session的数据存储
cookie：每条的存储空间为4k
localStorage：一般浏览器支持的是5M大小，不同的浏览器有所不同。
之前，这些都是由
cookie完成的，但是cookie不适合大量的数据存储，因为它们针对每个服务器请求来传递，这使得cookie的速度慢而且效率不高。
在h5中数据不是由每个服务器请求传递的，而是只有在请求时使用数据，它使在不影响网站性能的前提下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问自身的数据。
②sessionStorage
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
二、localStorge优缺点
优点
1、拓展了cookie的限制
2、可以将以此请求的数据存储在本地，相当于一个5m的本地数据库
缺点
1、浏览器存储的大小不统一，IE8以上版本才支持
2、值类型被限定为string类型
3、在浏览器的隐私模式下面是不可读取的
4、本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
三、举例使用
① 使用localStorage
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
<script>
// 检查浏览器是否支持
if (window.localStorage) {
document.body.innerText = '支持 localStorge！';
} else {
document.body.innerText = '不支持！';
}
</script>②localStorge写入和读取的三种方法
<script>
if (window.localStorage ) {
let storge = window.localStorage;
/* 写入 */
// 写入字段a
storge['a'] = 1;
// 写入字段b
storge.b = 2;
// 写入字段c
storge.setItem('c', 3);
/* 读取 */
// 方式一
console.log(storge.a);
// 方式二
console.log(storge['b']);
// 方式三
console.log(storge.getItem('c'));
} else {
console.log('浏览器 不支持 localStorge!');
}
</script>其中官方推荐的是getItem\setItem这两种方法对其进行存取。
结果如下：
③localStorge的键获取
console.log('--------------------')
for (let i = 0; i < storge.length; i++ ) {
let key = storge.key(i);
console.log('key: '+key+' value: '+storge[key]);
}
④localStorge的删除和修改的方法
1、修改
// 修改就是重新赋值--例如给 键 a 重新赋值
storge.setItem('a',10);
2、删除
// 1.将所有内容清除
storge.clear();// 2.将localStorage中的某个键值对删除
storge.removeItem('b');四、json 和 json 字符串转换
①存储json数据
将json数据存储到本地，先使用JSON.stringify()将json对象转换成字符串，然后在存储到localStorge中。
<script>
if (window.localStorage ) {
let storge = window.localStorage;
storge.clear();
let jsonData = {
'name':'xiaoming',
'age':'18',
'sex':'male'
};
let jsonString = JSON.stringify(jsonData);
storge.setItem('data', jsonString);
} else {
console.log('浏览器 不支持 localStorge!');
}
</script>结果
②读取json数据
打印一下 Storge
<script>
if (window.localStorage ) {
let storge = window.localStorage;
console.log(storge.getItem('data'));
console.log(typeof storge.getItem('data'));
} else {
console.log('浏览器 不支持 localStorge!');
}
</script>
获取到json字符串，将json字符串，转换为对象
<script>
if (window.localStorage ) {
let storge = window.localStorage;
let json = storge.getItem('data');
let data = JSON.parse(json);
console.log(data);
} else {
console.log('浏览器 不支持 localStorge!');
}
</script>