最近看别人的代码,发现他们在从localStorage里面的时候喜欢用dot来操作,而不是get setItem,记得以前说过这个事。下面再说一次吧。
用dot方式来操作( 每次以'hello'=>'world','zhangsan'=>'lisi'来做为例子)
设值 localStorage.hello = 'world'; localStorage.zhangsan = 'lisi'; 取值: var value_of_hello_in_localStorage = localStorage.hello; var value_of_zhangsan_in_localStorage = localStorage.zhangsan
用getItem setItem来操作
设值: localStorage.setItem("hello", "world"); localStorage.setItem("zhangsan", "lisi"); 取值: localStorage.getItem("hello"); localStorage.getItem("zhangsan");
这两种方法的效率我不清楚,但是为什么推荐使用get setItem呢?
1.容易控制,便于动态绑定,尤其在函数抽离和重构中。比如我要存一个复杂类型,每次存的时候都需要做JSON.stringify(object_a),所以我把它抽成函数
//用dot方式来实现设值: function storage_object(key,object_value) { localStorage.key = JSON.stringify(object_value); } //用getItem方式来实现: function storage_object (key,object_value) { localStorage.setItem(key,JSON.stringify(object_value)); }
这时候就会明显的发现用dot的方式是很不合适的。因为他不能实现动态的绑定key。
2.感觉用getItem更美观,容易读懂。这个是个人意见。我记得我看过一段代码,作用大概是实现计数吧:
locatStorage.count++
我看见他的时候, 当时就蒙圈了。确实挺简单的,但是不容易懂啊。这是在考验我啊。
大概就是这样。
相关推荐
这个类中,`setItem`和`getItem`方法都使用了`JSON.stringify`和`JSON.parse`进行数据的序列化和反序列化,以适应`localStorage`的字符串存储需求。同时,通过类型注解,我们确保了在设置和获取值时的类型安全。 ...
通过`typeof`判断传入的`value`类型,如果是对象,则使用`JSON.stringify`将其转换为字符串,并添加前缀“obj-”,最后调用`localStorage.setItem`保存数据。同时,更新`#date`键值为当前日期,用于后续的过期检查。...
var value = localStorage.getItem("key"); ``` 3. 更新数据: ```javascript localStorage.setItem("key", "newValue"); ``` 4. 删除数据: ```javascript localStorage.removeItem("key"); ``` 5. 清空...
在这个例子中,我们定义了`setItem`、`getItem`和`removeItem`三个基本方法,分别对应localStorage的原生方法。由于localStorage只能存储字符串,我们在存入和取出时都进行了JSON序列化和反序列化的处理。 2. 在Vue...
window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法: 1、新建一个store.js文件 ...
localStorage和sessionStorage在前端开发中使用广泛,但在设计应用时应考虑到它们的局限性,并根据实际需求和情况合理选择使用localStorage还是sessionStorage,以确保应用的功能性和性能表现。
localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 localStorage.valueOf( )//获取全部值 localStorage.removeItem(key)//删除单个值,注意引号 localStorage.clear()/...
它主要包含两个方法:`setItem()` 和 `getItem()`,以及一个 `removeItem()` 方法用于删除存储的数据。 1. **设置数据** 使用 `setItem()` 方法可以将键值对存储到 `localStorage` 中。例如,如果你有一个名为 `...
使用`localStorage.setItem(key, value)`方法可以将数据存储到localStorage中,例如: ```javascript localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken); ``` 这里,`...
要使用localStorage保存数据,可以使用`localStorage.setItem(key, value)`方法。其中`key`是用于检索存储值的名称,`value`是要保存的数据。当需要从localStorage中获取数据时,可以使用`localStorage.getItem(key)...
这个压缩包可能包含一系列的示例代码、讲解文档或者教学视频,用于深入理解LocalStorage的使用和应用场景,比如用户设置保存、游戏进度存储、无刷新的购物车等。学习和掌握LocalStorage对于前端开发者来说非常重要,...
2、localStorage.setItem(color,red); //第二种设置存储本地数据的方法 3、localStorage.removeItem(name); //删除本地存储数据 4、localStorage.name //获取本地数据 localStorage.getItem(set) //另一种获取...
LocalStorage提供了`localStorage.getItem(key)`用于获取值,`localStorage.setItem(key, value)`用于设置值,`localStorage.removeItem(key)`用于删除键值对,以及`localStorage.clear()`用于清空所有数据的方法。...
使用LocalStorage的方法很简单,通过`window.localStorage`对象进行操作。例如: ```javascript // 存储数据 localStorage.setItem('key', 'value'); // 获取数据 var value = localStorage.getItem('key'); // ...
iframe.js 文件覆盖 localtStorage setItem 、 getItem和removeItem方法,并提供延迟接口等待结果。 代码示例 在嵌套页面中包含 iframe.js 后,您可以将 localStorage 方法与经典接口一起使用。 localStorage . ...
一种广泛使用的本地存储方法是使用JavaScript中的localStorage对象。localStorage属于Web Storage的一种,提供了在客户端存储大量数据的能力,并且存储的数据没有过期时间限制,除非我们显式地清除它们。 ### ...
当用户添加、修改或删除学生信息时,可以使用`localStorage.setItem()`和`localStorage.getItem()`方法来存取数据,而`localStorage.removeItem()`和`localStorage.clear()`则用于删除和清空数据。 总结来说,这个...
使用`localStorage.setItem(key, value)`来设置存储的键值对,`localStorage.getItem(key)`来读取值。在代码中,我们需要检查`localStorage.getItem('popupShown')`,如果返回非空值,表示弹窗已在某天显示过。 6....