h5新特性

最新推荐文章于 2024-06-24 14:21:19 发布

tianjingsha959

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量343

点赞数

文章标签： javascript

原文链接：https://www.cnblogs.com/vicky1018/p/7705223.html

版权

新特性请参考这篇文章，以下内容仅为个人笔记。
h5新特性https://www.cnblogs.com/vicky1018/p/7705223.html

1.sessionStroge
语法：Window sessionStorage 属性
新建一个页面，在console页面输入sessionStorage.setItem("name","how to find job")
然后切换到application栏可以查看到sessionstroge中有我们对应项目。点击项目，可以查看到我们刚刚设置的name值。在这里插入图片描述当对name值进行重新设置后，再次查看会发现之前的name值被覆盖了。
我们也可以用sessionStorage.getItem("name")去获取name值。
还可以设置多个值，比如可以设置from值：sessionStorage.setItem("from",2020)依旧可以查询到from值在这里插入图片描述
我们还可以通过sessionStorage.length查询到sessionStorage对象中存储的数据项的数目。
想要移除sessionStorage中的一个项目，可以使用remove移除:sessionStorage.removeItem("from"),此时再去application中查询就没有from数据项了。

sessionStorage.clear()

sessionStorage.clear()可以清除sessionStorage对象中存储的所有数据项，慎用。
2.storage事件
当存储区域发生变化的时候，会触发一个storage事件。比如设置新数据，移除，或者清除数据的时候，都会触发这个storage事件。
要注意的是，这个storage事件会在其他窗口或者标签里面发生。
也就是数据发生改变的窗口不会触发storage事件，但是其他窗口可以接收这个事件。前提是这些窗口或者标签可以访问到发生变化的storage数据。
实例：
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
        <meta http-equiv="X-UA-Compatible" content="ie=chrome,chrome=1">
        <title>h5新特性</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row" style="padding: 0 25px;">
                <div class="page-header">
                    <h1 id = "buttons">localStorage</h1>
                </div>
                <button id="set-storage" class="btn btn-primary">设置数据项目</button>
                <button id="clear-storage" class="btn btn-primary">清除数据项目</button>
            </div>
        </div>
        <script src="../js/script.js"></script>
    </body>
</html>

script.js

//设置数据
const setStorage = () => {
    localStorage.setItem("name","今天天气不错")
}
//清空数据
const clearStorage = () => {
    localStorage.clear()
}

const showStorageInfo=(e)=>{
    console.log(
        '数据名称:'+e.key+'\n'+
        '以前的值:'+e.oldValue+'\n'+
        '新的值:'+e.newValue+'\n'+
        '链接:'+e.url+'\n'+
        '存储:'+e.storageArea
    );
}
const btnSetStorage = document.querySelector("#set-storage");  // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
btnSetStorage.addEventListener('click',(e)=>{
    setStorage()
},false)
const btnClearStorage = document.querySelector("#clear-storage");  // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
btnClearStorage.addEventListener('click',(e)=>{
    clearStorage()
},false)


window.addEventListener('storage',showStorageInfo,false)

运行调试，点击按钮可以设置或清除localStorage，但是console并没有打印出数据，当我们打开一个新的标签页，它可以监听到其他页面对storage的改变，但是本窗口不会监听自己的改变。如图所示。
监听数据
3.localStorage作用域
取决于文档的来源。同一来源的文档可以互相使用定义的localStorage数据。
这个文档的来源是根据他们的主机名，端口号和协议定义的。
同一个源下的不同文件可以相互访问。–同源策略
不同浏览器之间是访问不到的。

4.数据转换
简便读取方法：
localStorage.name = “你好”
相当于localStorage.setItem(“name” ,“你好”);
localStorage.name
相当于localStorage.getItem(“name”);
但是这种方法只适用于存取字符串类型的。

tianjingsha959

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5新特性

1.sessionStroge语法：Window sessionStorage 属性新建一个页面，在console页面输入sessionStorage.setItem("name","how to find job")然后切换到application栏可以查看到sessionstroge中有我们对应项目。点击项目，可以查看到我们刚刚设置的name值。当对name值进行重新设置后，再次查看会发现之前的name值被覆盖了。我们也可以用sessionStorage.getItem("name")去获取na
复制链接

扫一扫