如何向localStorage上的数组push数据

635 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

localStorage只能存储String,要用Json对象转化下:

如何向localStorage上的数组push数据

示例:

var arrayObject = [];//创建数组
arrayObject.push('a','b','c');//数据放入数组内,输出['a','b','c']

//JSON.stringify()方法将 JavaScript 对象转换为字符串。
localStorage.setItem("array",JSON.stringify(arrayObject));

//JSON.parse()方法将数据(字符串)转换为 JavaScript 对象。
var arrayObjectLocal = JSON.parse(localStorage.getItem("array"));
arrayObjectLocal.push('d','e','f');//数据放入数组内,输出['a','b','c','a','b','c']
for (i = 0; i < arrayObjectLocal.length; i++) { 
    console.log(arrayObjectLocal[i]);
}

定义和用法

在浏览器中存储主要分为以下三种方式

1、localStorage

生命周期永久,除非用户清除浏览器中的localStorage信息,否则永远存在;

存放数据大小一般为5MB;

仅在浏览器中保存,不参与服务器通信;

API调用:

localStorage.setItem("key","value");//以“key”为名称存储一个值“value” 
localStorage.getItem("key");//获取名称为“key”的值 
localStorage.removeItem("key");//删除名称为“key”的信息。 
localStorage.clear();​//清空localStorage中所有信息

2、sessionStorage

仅在当前会话下有效,关闭页面或者浏览器后被清除;

存放数据大小一般为5MB;

仅在浏览器中保存,不参与服务器通信;

可以接受源生接口,亦可以再次封装来对Object和Array有更好的支持;

API调用:

sessionStorage.setItem("key","value");//以“key”为名称存储一个值“value” 
sessionStorage.getItem("key");//获取名称为“key”的值 
sessionStorage.removeItem("key");//删除名称为“key”的信息。
sessionStorage.clear();​//清空sessionStorage中所有信息

3、Cookie

生命周期为在cookie设置的过期时间之前一直有效,即使窗口或者浏览器关闭;

存放数据大小为4K;

有存储个数限制(各浏览器不同),一般不超过20个;

与服务器端通信,每次都会携带在HTTP头中,cookie存储数据过多会带来性能问题;

4、localStorage与sessionStorage区别

我经常用到的存储方式为前两种,因此需要清楚了解它们之间的区别。

localStorage与sessionStorage的API调用方法相同;

不同浏览器无法共享localStorage或sessionStorage中的信息;

相同浏览器的不同页面可以共享相同的localStorage(前提是页面属于相同域名和端口);

相同浏览器的不同页面无法共享sessionStorage的信息;