localStorage和sessionStorage,利用浏览器在本地存储数据。相当于一个前端页面的数据库。

作用：

1 可以在本地实现不同网页中间，JavaScript 数据的传递.

2 相当于一个前端数据库，解决Cookie存储空间不足的问题

localStorage是本地永久存储数据，一般浏览器的大小为5M.

sessionStorage是会话级的保存数据，浏览器关闭，数据也会清空。

localStorage和sessionStorage的其他用法类似。

使用:

1 保存数据

<script type="text/javascript">
    //判断浏览器是否支持localStrorage
    if(window.localStorage)
    {
        var store = window.localStorage;
        //获得localStorage对象
        
        //localStorage存储数据
        store["name"] = "wanmait";
        store.age = 15;
        store.setItem("level","优");
        //存储数据以键值的形式保存,以上三种方式实现数据的保存是相同的
    }
</script>

2 取数据

<script type="text/javascript">
    var store = window.localStorage;
    
    //localStore取数据
    console.log(store.getItem("name"));
    console.log(store["age"]);
    console.log(store.level);
</script>

显示结果：

3 数据清除

<script type="text/javascript">
    //判断浏览器是否支持localStrorage
    if(window.localStorage)
    {
        var store = window.localStorage;
        //获得localStorage对象
        
        //localStorage存储数据
        store["name"] = "wanmait";
        store.age = 15;
        store.setItem("level","优");
        //存储数据以键值的形式保存,以上三种方式实现数据的保存是相同的
        
        store.removeItem("name");
        //删除name键的数据
        store.clear();
        //清空所有内容
    }
</script>

注意：

localStorage保存的是字符串，所以，不能保存JSON格式的对象

1 先通过JSON.stringify()方法将对象转换成字符串

2 再通过JSON.parse()方法将字符串转换成JSON对象

使用:

1 存储

<script type="text/javascript">
    //判断浏览器是否支持localStrorage
    if(window.localStorage)
    {
        var store = window.localStorage;
        //获得localStorage对象
        
        //localStorage存储数据
        var school = {"name":"wanmait","age":15,"level":"优"};
        school = JSON.stringify(school);
        //JSON格式的对象转换成字符串
        store.setItem("school",school);
    }
</script>

2 读取

<script type="text/javascript">
    var store = window.localStorage;
    
    //localStore取数据
    var school = store.getItem("school");
    school = JSON.parse(school);
    //字符串转换成JSON格式的对象
    console.log(school.name);
    console.log(school.age);
    console.log(school.level);
</script>

3 显示效果