登录 / 注册
localstorage使用方法
发布时间:2019-11-18 14:52:26 查看:895

现在前端做数据存储,跨页面传值,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.通过封装方法实现来回转化
宁夏银川舜新艺软件开发
ShunXinyi Soft develop
主要经营
软件开发,网站制作,网页设计,移动应用(安卓、苹果),微信,微网站,
FLASH动画,电子商务,计算机软硬件及网络设备等。
电话:18695132945 QQ:23923027
舜新艺软件开发 宁ICP备16001093号-1 宁公网安备 64010602000809号