了解下JavaScript的Storage setItem()的方法

作者：andy0012019.11.04来源：Web前端之家浏览：10234评论:0

关键词：Storage setItem()

今天在开发一个中英文切换的项目上用到了Storage setItem()的方法，所以想笔记下，用兴趣的朋友可以看下。

Storage setItem() 方法

setItem()方法设置指定的存储对象项的值。setItem()方法属于Storage对象，可以是localStorage对象，也可以是sessionStorrage对象。

指定此域的localStorage的值：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Web前端之家</title>

<body>

<h1>  Storage setItem() 方法 </h1>

<p>此示例演示如何使用setItem（）方法设置指定本地存储项的值。</p>

<button onclick="createItem()">设置localStorage项目</button>

<h2>获得值</h2>

<p>单击按钮以获取项目值：</p>

<button onclick="readValue()">获取项目值</button>

<p id="demo"></p>

<script>

    function createItem() {
        localStorage.setItem("mytime", Date.now());
    }

    function readValue() {
        var x = localStorage.getItem("mytime");
        document.getElementById("demo").innerHTML = x;
    }

</script>
</body>
</html>

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
setItem()	8.0+	4.0+	3.5+	4.0+	10.5+

语法

localStorage.setItem(keyname, value)

或者

sessionStorage.setItem(keyname, value)

参数值

值	描述
keyname	需要。一个字符串，指定要设置值的键的名称
value	需要。一个字符串，指定要设置值的键的值

技术细节

项目	描述
DOM版本：	Web Storage API
返回值：	一个字符串，表示插入的值

更多例子

相同的示例，但使用sessionStorage而不是localStorage。设置指定sessionStorage项的值：：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Web前端之家</title>
<body>

<h1>  Storage setItem() 方法 </h1>

<p>此示例演示如何使用setItem（）方法设置指定本地存储项的值。</p>

<button onclick="createItem()">设置sessionStorage项目</button>

<h2>获得值</h2>

<p>单击按钮以获取项目值：</p>

<button onclick="readValue()">获取项目值</button>

<p id="demo"></p>

<script>

    function createItem() {
        sessionStorage['mytime'] =  Date.now();
    }

    function readValue() {
        var x = sessionStorage.getItem("mytime");
        document.getElementById("demo").innerHTML = x;
    }

</script>
</body>
</html>

赏您的支持是我们创作的动力！