Web Storage

最新推荐文章于 2021-09-08 19:59:00 发布

Namnan

最新推荐文章于 2021-09-08 19:59:00 发布

阅读量112

点赞数

文章标签： js

本文链接：https://blog.csdn.net/litternannan/article/details/105883669

版权

本地储存的几种方式

cookie：一般只能存储4kb的数据，每个http请求都会被传送回服务器，使用安全策略跟踪
Web Storage：大约5MB，类似于key-value的存储方式
Web SQL Database兼容性
Indexed Database: 索引数据库，类似于NoSQL强大，支持索引，事物处理和健壮的查询功能

Web Storage

会话储存session storage//新开页面不存在，重新打开页面不存在
本地储存local storage//在同一个域里面可以跨页面

区别

两者之间的区别在于localStrange里面存储的数据没有过期时间设置。而存储在sessionStorge里面的数据在页面会话结束的时候会被清除掉。页面会话在浏览器打开期间一直保存，并且重新加载或恢复页面仍然会保持原来的页面会话

属性方法

Storage.length只读
返回一个整数，表示储存在Stroage对象中的数据项数量

方法

Stroage.key()该方法接受一个数值n作为参数，并且返回存储中的第n个键名
Stroage.getItem()该方法接受一个键名作为参数，返回参数名对应的值
Stroage.setItem（）该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名还在，则更新其对应的值
Stroage.removeItem()该方法接受一个键名作为参数，并把该键名从储存中删除
Storage.clear()调用该方法会清空储存中所有的键名

<script>
//存一个数据
localStorage.setItem('name','法外狂徒张三');

//获取数据
localStorage.getItem('name');

//数据存储设置
localStorage.name2 = '小楠楠';
localStorage['name3'] = 'litternannan';
localStorage.num1 = 520;
localStorage.obj = {name:'nan'};//字符串，显示obj

尝试在输入框里不断保存东西

<textarea name = "" id="mytext" ></textarea>
<script>
    var mytxt = document.getElementById('mytext');
    //键盘按下就能报存哦
    mytext.onkeyup = function(){
        localStorage.setItem('mytext',mytxt.value);
}
if(localStorage.getItem('mytxt')){
      mytxt.value = localStorage.setItem('mytxt');
      }
 </script>

在另一个页面中实时更新

<script>
window.onload = function(){
//查看是否有保存的数据，如果有就显示在页面上
 setInterva(function() {
      if(localStorge.getItem('mytxt')){
         document.boduy.innerHTML = localStorage.getItem('mytxt');
         }
      },100)
  }
</script>