LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]浏览器localStorage使用方法

admin
2023年8月4日 22:14 本文热度 690

现在前端做数据存储,跨页面传值,localStorage是一个很好的方式,以键值对的方式存储,也方便取值赋值,下面说一说使用方法和一些常见的使用技巧。


1、存值共有3种方式,localStorage相当于window对象下面的一个属性,所以有[]和.调用,但也具有自身的setItem方法

// 自身方法

localStorage.setItem("name","bonly");

// []方法

localStorage["name"]="bonly";

// .方法

localStorage.name="bonly";


2、取值也是如此,自身的方法是getItem

// 自身方法

localStorage.getItem("name");

// []方法

localStorage["name"];

// .方法

localStorage.name;


3、改变的方式,就是相当于给对应的key重新赋值,就会把原来的值覆盖掉

// 自身方法

localStorage.setItem("name","TOM");

// []方法

localStorage["name"]="TOM";

// .方法

localStorage.name="TOM";


4、移除某一个值,可以通过对象删除属性的关键字delete也可以用自身的方法removeItem

// 自身方法

localStorage.removeItem("name");

// []方法

delete localStorage["name"];

// .方法

delete localStorage.name;


5、获取所有的key

// 通过自身的key

for (var i=0;i<localStorage.length;i++)

{

    console.log(localStorage.key(i));

}

// 通过for in 循环获取

for(var key in localStorage)

{

    console.log(key);

}


6、获取所有的值

localStorage.valueOf();  //取出所有的值


7、清除所有的值

localStorage.clear();


8、判断是否具有某个key,hasOwnProperty方法

localStorage.hasOwnProperty("name")

// 如果存在的话返回true,不存在返回false


9、注意事项

1.localStorage特定于页面的协议,不是同一域名,不能访问。

2.有长度限制,5M左右,不同浏览器大小会有不同。

3.生命周期是永久的,但是数据实际是存在浏览器的文件夹下,可能卸载浏览器就会删除。

4.浏览器可以设置是否可以访问数据,如果设置不允许会访问失败。

5.兼容IE8以上浏览器。

6.只能存储字符串类型,需要转成字符串存储。


10、使用技巧

1.先判断浏览器是否支持localStorage,通过if(!window.localStorage) return;

2.单词太长,不方便书写,可以利用 var storage=window.localStorage;

3.字符串和原始类型需要通过JSON.stringfy转字符串,通过JSON.parse转成对象。

4.通过封装方法实现来回转化。


该文章在 2023/8/4 22:17:40 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved