LocalStorage和SessionStorage的使用以及JSON转换

Web Storage的应用

功能：

通过Web Storge可以让应用程序在客户端运行时在客户端保存程序数据，从而把浏览器变成一个真正的“程序运行环境”，而不是简单的“界面呈现工具”

Storage接口：Session Storage Local Storage

Session Storage（会话储存）：

基于Session的Web Storge。Session Storage保存的数据生存期限与用户Session期限相同，用户Session结束时， Session Storage保存的数据就丢失了。（网页关闭，内存清零）

Local Storage（本地储存）：

保存在用户磁盘的 Web Storage。数据生存期限很长，除非用户或程序显示地清楚这些数据，否则这些数据会一直存在。（网页关闭，数据不清零）

区别：

功能用法是相同的，只是保存数据的生存期限不同。

重点：

二者保存的数据的形式只能是字符串，基本使用时基本满足，但是面对复杂的数据时，需要利用JSON转换。+

常用方法或者属性：

length   返回内存中的数据的长度
key(index) 返回内存中的第index个数据的键值
getItem(key) 返回内存中键值为key的value
setItem(key,value)向内存中储存键值为key的value数据
removeItem(key)  删除内存中键值为key对应的值
clear()   清除内存中的所有内容

具体操作

存数据；假如存入的数据是一个对象  使用本地储存


1、//建立对象：用于往本地储存里面存储东西
   var exobj = { 
                "name": exnames,
                "src": imgsSrces,
                "pro": exprofessions
  }
  
2、//将对象转换为字符
//利用JSON的JSON.stringif（）方法。
var jsonStrings = JSON.stringify(exobj);
  
3、//在本地储存中存入数据
//利用localStorage.setItem（key，value）;方法  
//存入的值以对象的名字的内容为键值，obj的所有内容为存入的数据（数据已经利用JSON转换为字符串）。

localStorage.setItem（exnames，jsonStrings）

4、//在本地储存中取数据
//利用localStorage.getItem（key）方法
 
 var outputLocal = localStorage.getItem(exnames);
 
5、//将取出的数据转换为对象（本地里储存的是字符串）
//利用  JSON.parse()方法
 
 var jsonObjects  = JSON.parse(outputLocal);
 
6、//此时已经完成储存对象和取出对象了。

7、//在本地数据库里面删除对象。
//利用localStorage.removeItem（key)

  localStorage.removeItem(jsonObjects.name);//jsonObjects.name属性对应的值即为添加的内容的key值。
  
8、//在数据库里面一键清除所有内容

localStorage.clear();

9、//获取数据库中的第n个数据的key值

localStorage.(index);
注意//：localStorage.getItem（key） 是返回key值的value
//localStorage.(index)  是返回key

10、//遍历数据库中的数据
//localStorage.length储存数据的长度 
for (let s = 0; s < localStorage.length; s++) {
           //获取每一个数据的key值
            var keys = localStorage.key(s);
           //获取每一个key值对应的内容
            var contents = localStorage.getItem(keys);
            //将每一个数据转换为JSON对象
            var e = JSON.parse(contents);
            //生成的数据添加到网页中(这是自己做的实例，仅展示如何使用);
            $("#allHeros").append("<div class=\"col-md-1 addImg liArray\">" + "<span class=\"changeArrays\" >" + "<img src=\"./image/交换.jpg\" class=\" btn btn-lg imglistchange\"  data-toggle=\"modal\" data-target=\"#myModal_2\">" + "</span>" +
                "<img class=\"imgSon\" src=\"" + e.src + "\">" + "<span class=\"spanArrays\">" + "<img class=\"delImg\" src=\"./image/删除.png\">" + "</span>" + "<span class=\"heroName\">" + e.name + "</span>" + "</div>"); //生成一个图片的标签
            
        }