对于JS中localStorage的理解

前言

最近在开发博客的过程中，遇到了数据储存的问题，由于我服务器中还未安装sql，加上我对数据库的操作还不是很熟悉，所以先把数据放入了localStorage中，所以我就具体了解了一下这个本地数据库。

正文

前端的存储数据的三种方式

前端一般数据存储的方式有三种：

1. cookies

2. sessionStorage

3. localStorage

   简单介绍一下这三种方式的异同：

4. cookies与localStorage可以是永久存储（cookies可设置失效时间；用户不主动清除）

5. sessionStorage与localStorage属于H5引入的新标签，在IE8，Chrome4.0等以上才能执行；并且存储空间更大（5MB/站点）相对于cookies（4KB/站点）。

具体localStorage的解析

localStorage的优势与局限

优势

1. 相对于cookies拓展了空间大小。
2. 相对于sessionStorage，可永久存储信息。

局限

1. 由于是H5引入的属性，可能一些老版的浏览器不支持该属性。
2. localStorage所存储的信息被限定被string类型，但由于有JSON等对象转换算法，所以也无所谓了。
3. 另外我在网上了解到，localStorage无法被爬虫抓取到，这一点我目前没有深入探究。

localStorage的使用

判断浏览器是否支持 localStorage属性

if(！window.localStorage){
    alert("您的浏览器不支持localStorage")
    return false}
else{
        //执行代码
    }

localStorage的写入

三种方法：

var data=window.localStorage;
data["name"] = MJ;//关键字name写入
data.age = 20;//关键字age的写入
data.setItem = ["shcool",清华大学];//关键字school写入

注意：前面是将localStorage属性放入了data变量，同样可以不放入变量，直接调用，所以前面的代码等同于:

localStorage["name"]=MJ;
localStorage.age=20;
localStorage.setItem("school",清华大学);

localStorage的读取

三种方法：

var name = localStorage["name"];
var age = localStorage.age;
var school = localStorage.getItem("school");

同样想写入方法一样，也可以将localStorage放入变量中在调用。

值得注意的是，官方更推荐使用，setItem与getItem语法，其原因未具体说明，我猜测可能是为了与JS中的对象区分开，更加语言话，不产生混淆

localStorage的删改

localStorage改关键字的值其实就是重新为其赋值，即：

localStorage.setItem("name",MW);
var nameAfter=localStorage.getItem("name");
//nameAfter===MW->true

localStorage的删除：

localStorage.clear();//删除改站点的所有localStorage数据
localStorage.removeItem("name");
//此时localStorage.name->nudifined

关于存储的数据仅为string的解决办法（JSON数据类型转换）

一，写入时转换为JSON格式输入

var person={
        name = "MJ",
        age = 20,
        maritalStatus = true
        }
    localStorage.setItem("person",JSON.string(person));

二，读取时转换为JS变量

var person =JSON.parse(localStorage.getItem("person"));
typof(person.age) //typeof检查变量类型为number
typeof(person.maritalStstus)//boolean

最后

本来写之前感觉有很多注意要写，但写起来感觉哪些之前感觉是注意点的地方其实只是一个普通的点，所以感觉写起来感觉没有太重要的点，但需要注意的点还是有滴，比如三种存储的异同，localStorage存储的数据仅为string等等。ok，就这样把！