Web Storage的应用

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>"); //生成一个图片的标签



        }