javascript - localStorage 本地存储(新增、删除、修改)使用教程
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
介绍
现在前端做数据存储跨页面传值localStorage是一个很好的方式以键值对的方式存储也方便取值赋值下面说一说使用方法和一些常见的使用技巧。
存值共有3种方式localStorage相当于window对象下面的一个属性所以有[]和.调用但也具有自身的setItem方法
localStorage.setItem("name","bonly");
localStorage["name"]="bonly";
localStorage.name="bonly";
取值也是如此自身的方法是getItem
localStorage.getItem("name");
localStorage["name"];
localStorage.name;
改变的方式就是相当于给对应的key重新赋值就会把原来的值覆盖掉
localStorage.setItem("name","TOM");
localStorage["name"]="TOM";
localStorage.name="TOM";
移除某一个值可以通过对象删除属性的关键字delete也可以用自身的方法removeItem
localStorage.removeItem("name");
delete localStorage["name"];
delete localStorage.name
获取所有的key
for (var i=0;i<localStorage.length;i++) {
console.log(localStorage.key(i));
}
for(var key in localStorage){
console.log(key);
}
获取所有的值
localStorage.valueOf();
清除所有的值
localStorage.clear()
判断是否具有某个keyhasOwnProperty方法
localStorage.hasOwnProperty("name")
使用技巧
- 先判断浏览器是否支持localStorage通过if(!window.localStorage) return;
- 单词太长不方便书写可以利用 var storage=window.localStorage;
- 字符串和原始类型需要通过JSON.stringfy转字符串通过JSON.parse转成对象
- 通过封装方法实现来回转化
注意事项
- localStorage特定于页面的协议不是同一域名不能访问。
- 有长度限制5M左右不同浏览器大小会有不同。
- 生命周期是永久的但是数据实际是存在浏览器的文件夹下可能卸载浏览器就会删除。
- 浏览器可以设置是否可以访问数据如果设置不允许会访问失败。
- 兼容IE8以上浏览器
- 只能存储字符串类型需要转成字符串存储。
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |