`

localStorage请使用getItem 和setITem

阅读更多

最近看别人的代码,发现他们在从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++ 

 我看见他的时候, 当时就蒙圈了。确实挺简单的,但是不容易懂啊。这是在考验我啊。

大概就是这样。

1
2
分享到:
评论

相关推荐

    vue 界面刷新数据被清除 localStorage的使用详解

    window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法: 1、新建一个store.js文件 ...

    使用Typescript编写更加易用的localStorage和sessionStorage的API

    这个类中,`setItem`和`getItem`方法都使用了`JSON.stringify`和`JSON.parse`进行数据的序列化和反序列化,以适应`localStorage`的字符串存储需求。同时,通过类型注解,我们确保了在设置和获取值时的类型安全。 ...

    vue使用二次封装存储localStorage

    在这个例子中,我们定义了`setItem`、`getItem`和`removeItem`三个基本方法,分别对应localStorage的原生方法。由于localStorage只能存储字符串,我们在存入和取出时都进行了JSON序列化和反序列化的处理。 2. 在Vue...

    vue实现localStorage工具类

    通过`typeof`判断传入的`value`类型,如果是对象,则使用`JSON.stringify`将其转换为字符串,并添加前缀“obj-”,最后调用`localStorage.setItem`保存数据。同时,更新`#date`键值为当前日期,用于后续的过期检查。...

    cookie使用,localStorage使用

    var value = localStorage.getItem("key"); ``` 3. 更新数据: ```javascript localStorage.setItem("key", "newValue"); ``` 4. 删除数据: ```javascript localStorage.removeItem("key"); ``` 5. 清空...

    localStorage,sessionStorage的使用

    localStorage和sessionStorage在前端开发中使用广泛,但在设计应用时应考虑到它们的局限性,并根据实际需求和情况合理选择使用localStorage还是sessionStorage,以确保应用的功能性和性能表现。

    HTML5 LocalStorage 本地存储刷新值还在

    localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 localStorage.valueOf( )//获取全部值 localStorage.removeItem(key)//删除单个值,注意引号 localStorage.clear()/...

    使用localStorage缓存js

    它主要包含两个方法:`setItem()` 和 `getItem()`,以及一个 `removeItem()` 方法用于删除存储的数据。 1. **设置数据** 使用 `setItem()` 方法可以将键值对存储到 `localStorage` 中。例如,如果你有一个名为 `...

    详解vue中localStorage的使用方法

    使用`localStorage.setItem(key, value)`方法可以将数据存储到localStorage中,例如: ```javascript localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken); ``` 这里,`...

    JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    要使用localStorage保存数据,可以使用`localStorage.setItem(key, value)`方法。其中`key`是用于检索存储值的名称,`value`是要保存的数据。当需要从localStorage中获取数据时,可以使用`localStorage.getItem(key)...

    15 - LocalStorage.rar

    这个压缩包可能包含一系列的示例代码、讲解文档或者教学视频,用于深入理解LocalStorage的使用和应用场景,比如用户设置保存、游戏进度存储、无刷新的购物车等。学习和掌握LocalStorage对于前端开发者来说非常重要,...

    html5中localStorage本地存储的简单使用

    2、localStorage.setItem(color,red); //第二种设置存储本地数据的方法 3、localStorage.removeItem(name); //删除本地存储数据 4、localStorage.name //获取本地数据  localStorage.getItem(set) //另一种获取...

    webSql/LocalStorage

    LocalStorage提供了`localStorage.getItem(key)`用于获取值,`localStorage.setItem(key, value)`用于设置值,`localStorage.removeItem(key)`用于删除键值对,以及`localStorage.clear()`用于清空所有数据的方法。...

    HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储

    使用LocalStorage的方法很简单,通过`window.localStorage`对象进行操作。例如: ```javascript // 存储数据 localStorage.setItem('key', 'value'); // 获取数据 var value = localStorage.getItem('key'); // ...

    iframe-localstorage

    iframe.js 文件覆盖 localtStorage setItem 、 getItem和removeItem方法,并提供延迟接口等待结果。 代码示例 在嵌套页面中包含 iframe.js 后,您可以将 localStorage 方法与经典接口一起使用。 localStorage . ...

    JS localStorage实现本地缓存的方法

    一种广泛使用的本地存储方法是使用JavaScript中的localStorage对象。localStorage属于Web Storage的一种,提供了在客户端存储大量数据的能力,并且存储的数据没有过期时间限制,除非我们显式地清除它们。 ### ...

    LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统

    当用户添加、修改或删除学生信息时,可以使用`localStorage.setItem()`和`localStorage.getItem()`方法来存取数据,而`localStorage.removeItem()`和`localStorage.clear()`则用于删除和清空数据。 总结来说,这个...

    mobx-localstorage:使用MobX的声明式React式localStorage

    使用MobX的声明式React式localStorage 安装 yarn add mobx-localstorage npm i -S mobx-localstorage 特征 比本地吸气剂更高的性能 与外部变更同步 支持本机API和MobX API 用法 与本地相同,但MobX可以观察到 import...

Global site tag (gtag.js) - Google Analytics