对JS本地存储对象,原生JS函数以及VUE双向双向绑定数据获取标签值的基础学习

本文链接：https://blog.csdn.net/weixin_45913637/article/details/130244013

本文介绍了在Vue中如何通过原生JS方法和双向绑定获取文本框输入值，并展示了使用placeholder属性设置和修改输入提示。此外，还详细讲解了JavaScript的sessionStorage对象，包括写入、读取、删除和清空本地存储数据的操作方法。

摘要由CSDN通过智能技术生成

学习笔记-Vue-JS

原生JS拿取用户文本框输入值

<input type="text" placeholder="请输入你的任务名称，按回车键确认"  @keyup.enter="add"/>
```<script>
	export default {
		name:'MyHeader',
		methods: {
			add(){
		         Addtion(event){
                     consloe.log(event.target.value)  
                  }
			}
		},
	}
</script>

2 Vue双向绑定JS拿取用户文本框输入值

<input type="text" placeholder="请输入你的任务名称，按回车键确认"  v-model="Val" @keyup.enter="add"/>
```<script>
	export default {
		name:'MyHeader',
		data(){
          return{
               Val:''
            }
        },
		methods: {
			add(){
			   Addtion(){
                     consloe.log(this.Val)  
              }
			}
		},
	}
</script>

结果都为:
值是为

JS原生函数

unshift()方法 :

可以向数组开头添加一个或更多的元素,同时返回新的长度、

·     var Array = [1,2,3,4];
      let  Newnum’ =  Array.unshift(5);
      // Newnum为添加后的长度为5 
      console(Array);
      // Array内容为 5 1 2 3 4

placeholder属性

1.在input,Textarea(文本框,文本域)中 placeholder=“X” 属性值X，代表预设值内容

 <input type="text" name="fname" placeholder="Hello world！"><br>

2.可以对input,Textarea(文本框,文本域)中的预设值就行修改,通过获取标签ID的方法使用 placeholder=“X” 来修改预设值变成X

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<input id="myTextInput" placeholder="输入预期值..">
<textarea id="myTextarea" placeholder="输入预期值..">
</textarea>


<button onclick="myFunctionarea()">点我让文本域改变预设值</button>
<button onclick="myFunctioninput()">点我让输入框改变预设值</button>
<script>
function myFunctionarea() {
  document.getElementById("myTextarea").placeholder = "我是文本域的预设值";
}
function myFunctioninput() {
  document.getElementById("myTextInput").placeholder = "我是文本框的预设值";
}
</script>

</body>
</html>

点击按钮前
修改前
点击按钮后
修改后

JavaScript 存储对象

以下所以代码通过点击按钮实现

sessionStorage.setItem() ——写入函数
写入储存数据进入存本地储存空间
浏览器本地存储键和值 “key”,“Value”

sessionStorage.setItem(“Key”,“Value”)

 如果只有值会报错

在这里插入图片描述

sessionStorage.getItem()——读取函数
获取浏览器本地储存空间数据
通过读取键来获取值 “key”,“Value”

sessionStorage.getItem(“key”)

 读取没有的键会返回 Null
  配合console.log(sessionStorage.getItem())读取到浏览器控制台

在这里插入图片描述
如果读取不存在的键:

sessionStorage.removeItem()——删除函数
-删除本地数据对应的键同时删除值

sessionStorage.removeItem(‘key’)

sessionStorage.clear()——清空函数
删除本地储存空间里的所有键和值

sessionStorage.clear();

   全体删除

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()" >click sever </button>
    <button onclick="readData()" >click read </button>
    <button onclick="deleteData()" >click delete </button>
    <button onclick="deleteAllData()">click All delete</button>
    <script >
        let p ={name:'张三',age:18}


        function saveData(){
            
               //浏览器本地存储 键和值  "key","Value" 
               //sessionStorage.setItem(“Key”,"Value")
               //存储
               //如果只有值会报错

                sessionStorage.setItem('ms','helo!!!')
                sessionStorage.setItem("ms2",5656)
                //解析为对象保存内容   JSON.stringify
                sessionStorage.setItem("person",JSON.stringify(p))
            }
        function readData(){

                //浏览器本地读取 通过读取键来获取值   "key","Value" 
                //sessionStorage.getItem("key")
                 //读取
                //读取没有的键会返回 Null
                 
                console.log(sessionStorage.getItem("ms45"))//null

                console.log(sessionStorage.getItem('ms'))
                console.log( sessionStorage.getItem("ms2"))
                //解析为对象读取内容   JSON.pars
                const result = sessionStorage.getItem('person')
                console.log( JSON.parse(result))
            }
        function deleteData(){

                //删除本地数据对应的键 同时删除值
                //sessionStorage.removeItem('key')
                //删除

                sessionStorage.removeItem('ms')
                sessionStorage.removeItem("ms2")
                sessionStorage.removeItem("person")
            }
        function deleteAllData(){

                //删除本地储存空间里的所以键和值
                //sessionStorage.clear();
                //全体删除

                sessionStorage.clear();
        }
    </script>
</body>