您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
本地存储localStorage
点击数:351  发布时间2020-03-22 19:28:17

localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库。

 

注意:在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储,如果存储内容多的话会消耗内存空间,会导致页面变卡。

 

具体使用方式如下:

localStorage - 没有时间限制的数据存储

var arr=[1,2,3];

localStorage.setItem("temp",arr);   //存入 参数:1.调用的值 2.所要存入的数据

console.log(localStorage.getItem("temp"));//输出

 

清空localStorage

localStorage.clear(); //

删除键值对

localStorage.removeItem("arr");

注意:存入的数据只能以字符串形式存入。

 

下面是关于localStorage的简单使用:

localStorage.a = 3;//设置a"3"

localStorage["a"] = "sfsf";//设置a"sfsf",覆盖上面的值

localStorage.setItem("b","isaac");//设置b"isaac"

var a1 = localStorage["a"];//获取a的值

var a2 = localStorage.a;//获取a的值

var b = localStorage.getItem("b");//获取b的值

localStorage.removeItem("c");//清除c的值

 

 

localStorage提供转JOSN数据方法:

//JSON对象转JSON字符串

var obj = {"a": 1,"b": 2};

obj = JSON.stringify(obj); //转化为JSON字符串

localStorage.setItem("temp2", obj);

 

//JSON字符串转JSON对象

obj=JSON.parse(localStorage.getItem("temp2"));

 

 

【案例】本地排序

以姓名,成绩,当前时间存入本地存储,然后按成绩从高到低排序

// 对象数据

   <script>

    var data = [

        { 'name': '段松', 'score': '100', 'time': '2020-3-20 11:50:21' },

        { 'name': '马云', 'score': '89', 'time': '2020-3-20 11:50:21' },

        { 'name': '马化腾', 'score': '94', 'time': '2020-3-20 11:50:21' },

    ]

     data = [...data,

        { 'name': '雷军', 'score': '99', 'time': '2020-3-20 11:50:21' },

        { 'name': '求伯君', 'score': '73', 'time': '2020-3-20 11:50:21' },

        { 'name': '罗永浩', 'score': '59', 'time': '2020-3-20 11:50:21' }

    ]

 

    // 把对象转换为字符串格式 进行存储

    var data = JSON.stringify(data);

    localStorage.setItem('info', data);

 

    // 将本地存储数据取出,并转换为对象

    var info = JSON.parse(localStorage.getItem('info'));

 

    info.sort(function (a, b) {

        return a.score - b.score

    })

    console.log(info);

</script>


来源:咸宁网站建设
【上一篇】FormData对象
【下一篇】H5拖放