localStorage - 本地存储（添加、读取、修改、删除、JSON格式存储）

这个是我对localStorage的自己的理解~

什么是localStorage?

html5新增的一个本地存储的API，由于cookie的存储空间过小，localStroage一般浏览器支持存储5M，用于存储客户端的一些临时信息

只能存储字符串类型，不会被爬虫抓到

localStorage的存储生命周期是永久的，除非用户手动清除浏览器缓存

localStroage - 添加

 window.localStorage.setItem('a','123456')
//存入的是number类型，实际存储在localStorage的是string类型，因为localStorage只支持string类型存储

localStroage - 读取

window.localStorage.getItem("a");
console.log(typeof(window.localStorage.getItem("a"))); //String

官方推荐上述两种方法 setItem和getItem来添加和读取localStorage

localStorage - 修改

和修改全局变量的的原理一样，重新赋值即可

window.localStorage.setItem('a','新的值')

localStorage - 删除

//清除所有localStorage
window.localStorage.clear();

//清除某个键值对
window.localStorage.removeItem("a");

localStorage - 所有的键的获取

使用key()方法，向其中出入索引即可获取对应的键

let storage = window.localStorage;
for(let i = 0 ; i < storage.length; i++){
    console.log(storage.key(i));
}

JSON格式的存储问题

 一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用 JSON.stringify() 这个方法，来将JSON转换成为JSON字符串，存储在localStorage中

//注释：练习使用的是vue框架，原生不这样写
export default{
    name:'localStorage',
    data(){
        return{
            nameData:{
                name:'tom',
                age:15,
            }
        }
    },
    methods:{
        saveJSON(){
            let nameData = JSON.stringify(this.nameData) ;
            window.localStorage.setItem('nameData',nameData);
        }
    }
}

var storage=window.localStorage;
var data={
    name:'tom',
    hobby:'program'
};
var nameData = JSON.stringify(data);
storage.setItem("nameData",nameData);

获取的localStorage怎么将字符串转换回JSON格式，使用JSON.parse()

let getNameData = window.localStorage.getItem("nameData");
console.log(typeof(getNameData)); //sting类型
let getNameDataJSON = JSON.parse(getNameData);
console.log(typeof(getNameDataJSON));  //object类型

感谢看完~这是我对localStorage的自己的一些理解~