WebStorage
-
WebStorage包含sessionStorage和localStorage。其存储内存一把在5MB左右(不同浏览器不同)
-
localStorage存储,当浏览器关闭在开启存储的数据不会被清除。
-
清除浏览记录或操作localStorage可清除存储的数据
-
sessionStorage和localStorage的代码书写一致,当浏览器关闭在开启存储的数据会被清除。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>localStorage</h2> <!-- onclick点击事件 --> <button onclick="saveDate()">点我保存一个数据</button> <button onclick="readDate()">点我读取一个数据</button> <button onclick="deleteDate()">点我删除李四数据</button> <button onclick="clearDate()">点我清空数据</button> <script type="text/javascript"> let p = {name:'张三',age:18} function saveDate(){ // 将'李四', 'hello'存储到localStorage,括号内的第一个元素对应key,第二个元素对应value localStorage.setItem('李四', 'hello') //虽然传入的620为Number类型,但传入localStorage时自动转换成字符串型 localStorage.setItem('李三', 620) // 传入对象时需要转换成JSON格式,不然对象都是[Object,object ]。JSON.stringify() 方法用于将 JavaScript 对象或值转换为一个 JSON 字符串。 localStorage.setItem('p',JSON.stringify(p)) } function readDate(){ // 获取数值时只需要传入key值来获取value console.log(localStorage.getItem('李四')); console.log(localStorage.getItem('李三')); // 首先获取p对象 const person = (localStorage.getItem('p')); // 使用 JSON.parse() 方法,你可以将这个 JSON 字符串转换为一个 JavaScript 对象 console.log(JSON.parse(person)); } function deleteDate (){ localStorage.removeItem('李四') } function clearDate (){ localStorage.clear() } </script> </body> </html>