本地存储（localStorage）

浏览器的本地存储（localStorage）

1.概念：window对象下面的属性,html5新增的，将5M大小的数据存储本地的浏览器上面。

2.存储的位置：浏览器控制面板–application–左侧面板local Storage

3.本地存储localStorage特点：
①本地存储属于永久存储，除非手动删除。
②html5新增的,高版本的浏览器支持。
③目前所有的浏览器都会把localStorage数据类型设定字符串string.
④不同的浏览器本地存储的数据是不能相互进行访问。

4.localStorage的存取删

• 存储：存储方式( 键值对 - key=value)

window.localStorage.name = 'liang';
window.localStorage['age'] = 100;
window.localStorage.setItem('sex', '女'); //最优的
window.localStorage['num'] = 666;

• 存储变量：键值相同，会覆盖(属性名相同，覆盖)

let num = 300;
let str = 'score';
localStorage.setItem('score', 100);
localStorage.setItem(str, num);
localStorage.setItem('name', 'wangwu');

• 存储数组和对象

let arr = ['apple', 'banana', 'orange'];
localStorage.setItem('data', arr);
let obj = {
      	  a: 1,
          b: 2,
          c: 3
    }
localStorage.setItem('objdata', obj);//[object Object]
alert(obj);//所有对象的值都是一样的  [object Object]
console.log(obj);//输出对象的结构。
localStorage.setItem('objstring', JSON.stringify(obj));

• JSON：是一种数据格式，也可以叫做对象；前后端交互最好理想的数据格式。
  前端核心工作(渲染,用户体验，性能优化)
  渲染–数据(JSON格式的接口数据)
  JSON的特点：
  1.是一种轻量级的数据格式，不是js独有的。 独立文件。
  2.组成：简单值+数组+对象。
  3.里面的字符串一定要添加双引号。
  4.没有var，let，注释，分号等相关的js语法，代表数据。
  JSON下面的两个静态方法：
  1.JSON.parse():JSON格式的字符串转换成对象。具有json格式检测功能。

		let str = '{"a":1,"b":2,"c":3}';
		console.log(str);
		console.log(JSON.parse(str));

2.JSON.stringify():将对象转换成json格式的字符串。

	   var obj1 = { a: 1, b: 2, c: 3 }
	   console.log(JSON.stringify(obj1));//{"a":1,"b":2,"c":3}

• 取值

console.log(localStorage.name);//wangwu
console.log(localStorage['age']);//100
console.log(localStorage.getItem('data'));//apple,banana,orange
console.log(localStorage.getItem('objstring'));//{"a":1,"b":2,"c":3}
        // 如何获取数组和对象的值
console.log(localStorage.getItem('data'));//apple,banana,orange
        // 存储的是数组，取出来的是字符串
        // 存储的是对象，取出来的是字符串
        // 如何解决上面的问题。
console.log(localStorage.getItem('data').split(','));//["apple", "banana", "orange"]
console.log(localStorage.getItem('objstring'));//{"a":1,"b":2,"c":3}
console.log(JSON.parse(localStorage.getItem('objstring')));
console.log(JSON.parse(localStorage.getItem('name')));//null 访问的数据不存在

• 删除
  ①localStorage.removeItem

localStorage.removeItem('name');
localStorage.removeItem('age');

②手动通过本地控制面板删除